merge: intègre refactor/normes-xefi-admin-crud dans dev

- refactor(front): centralise la règle de statut et les colonnes dupliquées
- chore(front): extrait KpiCard, unifie la clé de session, retire du code mort
- feat(front): rend l'écran d'administration réellement fonctionnel
- fix(front): corrige les 4 erreurs eslint restantes

DataSentinel/src/App.jsx

@@ -1,7 +1,8 @@
 // src/App.jsx
 // Configuration du routing React Router v6 avec protection des routes
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { AuthProvider, useAuth } from './context/AuthContext';
+import { AuthProvider } from './context/AuthContext';
+import { useAuth } from './context/useAuth';
 import Layout from './components/Layout/Layout';
 import Login from './pages/Login/Login';
 import Dashboard from './pages/Dashboard/Dashboard';

DataSentinel/src/__tests__/AuthContext.test.jsx

@@ -1,7 +1,8 @@
 /* Tests du contexte d'authentification : login / logout */
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
-import { AuthProvider, useAuth } from '../context/AuthContext';
+import { AuthProvider } from '../context/AuthContext';
+import { useAuth } from '../context/useAuth';
 import * as api from '../services/api';
 
 describe('AuthContext', () => {

DataSentinel/src/components/Layout/Header.jsx

@@ -1,7 +1,7 @@
 /* En-tête fixe de l'application Data Sentinel */
 
 import { Bell, LogOut, Menu } from 'lucide-react';
-import { useAuth } from '../../context/AuthContext';
+import { useAuth } from '../../context/useAuth';
 import { useNavigate } from 'react-router-dom';
 import styles from './Header.module.css';
 

DataSentinel/src/components/Layout/Sidebar.jsx

@@ -13,7 +13,7 @@ import {
   FileText,
   ScrollText,
 } from 'lucide-react';
-import { useAuth } from '../../context/AuthContext';
+import { useAuth } from '../../context/useAuth';
 import styles from './Sidebar.module.css';
 
 /* Un lien de navigation avec icône */

DataSentinel/src/components/common/KpiCard.jsx

@@ -0,0 +1,10 @@
+import styles from './KpiCard.module.css';
+
+export default function KpiCard({ label, value, color }) {
+  return (
+    <div className={styles.kpiCard}>
+      <span className={styles.kpiValue} style={{ color }}>{value}</span>
+      <span className={styles.kpiLabel}>{label}</span>
+    </div>
+  );
+}

DataSentinel/src/components/common/KpiCard.module.css

@@ -0,0 +1,28 @@
+.kpiCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  background: var(--color-white);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+.kpiValue {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 6px;
+}
+
+.kpiLabel {
+  font-size: 12px;
+  color: var(--color-muted, #888);
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .kpiValue {
+    font-size: 28px;
+  }
+}

DataSentinel/src/components/common/Modal.jsx

@@ -0,0 +1,19 @@
+import styles from './Modal.module.css';
+
+export default function Modal({ isOpen, onClose, title, children }) {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay} onClick={onClose}>
+      <div className={styles.modal} onClick={e => e.stopPropagation()}>
+        <div className={styles.modalHeader}>
+          <h2>{title}</h2>
+          <button className={styles.closeBtn} onClick={onClose} aria-label="Fermer">×</button>
+        </div>
+        <div className={styles.modalBody}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

DataSentinel/src/components/common/Modal.module.css

@@ -0,0 +1,49 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background-color: var(--color-white);
+  border-radius: var(--radius);
+  border-top: 4px solid var(--color-primary);
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--color-gray-border);
+}
+
+.modalHeader h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.modalBody {
+  padding: 24px;
+}

DataSentinel/src/components/common/MonitoringCard.jsx

@@ -2,20 +2,14 @@
 
 import { useNavigate } from 'react-router-dom';
 import Badge from './Badge';
+import { getStatutMonitoring } from '../../utils/statutMonitoring';
 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);
+  const statut = getStatutMonitoring(nbErreurs);
 
   /* Calcul du pourcentage de la barre de progression (max 100%) */
   const progressPct = Math.min((nbErreurs / 20) * 100, 100);

DataSentinel/src/context/AuthContext.jsx

@@ -1,17 +1,15 @@
 /* Contexte d'authentification global : gestion de l'utilisateur connecté */
 
-import { createContext, useContext, useState } from 'react';
+import { useState } from 'react';
 import * as api from '../services/api';
-
+import { USER_KEY } from '../services/api';
-const AuthContext = createContext(null);
+import { AuthContext } from './authContextObject';
-
-const STORAGE_KEY = 'ds_user';
 
 /* Fournisseur du contexte d'authentification */
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(() => {
     /* Restauration de la session depuis le localStorage au montage */
-    const stored = localStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(USER_KEY);
     return stored ? JSON.parse(stored) : null;
   });
 
@@ -19,7 +17,7 @@ export function AuthProvider({ children }) {
   async function login(username, password) {
     const connectedUser = await api.login(username, password);
     setUser(connectedUser);
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(connectedUser));
+    localStorage.setItem(USER_KEY, JSON.stringify(connectedUser));
     return connectedUser;
   }
 
@@ -27,7 +25,7 @@ export function AuthProvider({ children }) {
   function logout() {
     api.clearToken();
     setUser(null);
-    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(USER_KEY);
   }
 
   /* Booléen pratique pour savoir si l'utilisateur est connecté */
@@ -40,11 +38,3 @@ export function AuthProvider({ children }) {
   );
 }
 
-/* Hook personnalisé pour accéder au contexte d'authentification */
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth doit être utilisé dans un AuthProvider');
-  }
-  return context;
-}

DataSentinel/src/context/authContextObject.js

@@ -0,0 +1,7 @@
+/* Objet de contexte isolé : un fichier qui exporte un composant ne doit
+   exporter que des composants, sans quoi le rafraîchissement à chaud de Vite
+   (react-refresh) cesse de fonctionner pour ce fichier. */
+
+import { createContext } from 'react';
+
+export const AuthContext = createContext(null);

DataSentinel/src/context/useAuth.js

@@ -0,0 +1,15 @@
+/* Hook d'accès au contexte d'authentification.
+
+   Séparé de AuthContext.jsx : un fichier qui exporte à la fois un composant
+   et autre chose casse le rafraîchissement à chaud de Vite (react-refresh). */
+
+import { useContext } from 'react';
+import { AuthContext } from './authContextObject';
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth doit être utilisé dans un AuthProvider');
+  }
+  return context;
+}

DataSentinel/src/hooks/useApi.js

@@ -1,33 +0,0 @@
-/* Hook générique pour les appels API : retourne { data, loading, error, refetch } */
-
-import { useState, useEffect, useCallback } from 'react';
-
-/**
- * @param {Function} fetchFn - Fonction async à appeler (depuis api.js)
- * @param {Array} deps - Dépendances qui déclenchent un re-fetch (optionnel)
- */
-export function useApi(fetchFn, deps = []) {
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  const fetch = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await fetchFn();
-      setData(result);
-    } catch (err) {
-      setError(err.message || 'Une erreur est survenue.');
-    } finally {
-      setLoading(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  useEffect(() => {
-    fetch();
-  }, [fetch]);
-
-  return { data, loading, error, refetch: fetch };
-}

DataSentinel/src/pages/Admin/Admin.jsx

@@ -1,229 +1,186 @@
 // src/pages/Admin/Admin.jsx
-// Page Administration : onglets pour gérer monitorings, services, catégories, contacts
+// Page Administration : CRUD sur les référentiels (monitorings, services,
-import { useState, useEffect } from 'react';
+// catégories, contacts). Réservée au rôle Admin côté API.
+import { useState, useEffect, useCallback } from 'react';
 import { Plus, Edit, Trash2 } from 'lucide-react';
 import { getMonitorings, getServices, getCategories, getContacts } from '../../services/api';
 import DataTable from '../../components/common/DataTable';
 import LoadingSpinner from '../../components/common/LoadingSpinner';
 import ErrorMessage from '../../components/common/ErrorMessage';
 import Button from '../../components/common/Button';
+import Modal from '../../components/common/Modal';
+import ReferentielForm from './ReferentielForm';
+import { REFERENTIELS, LIBELLES_REFERENTIEL } from './referentielsConfig';
 import styles from './Admin.module.css';
 
-/* Modale générique pour ajouter/modifier */
+async function chargerReferentiels() {
-function Modal({ isOpen, onClose, title, children }) {
-  if (!isOpen) return null;
-
-  return (
-    <div className={styles.modalOverlay} onClick={onClose}>
-      <div className={styles.modal} onClick={e => e.stopPropagation()}>
-        <div className={styles.modalHeader}>
-          <h2>{title}</h2>
-          <button className={styles.closeBtn} onClick={onClose}>×</button>
-        </div>
-        <div className={styles.modalBody}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function Admin() {
-  const [activeTab, setActiveTab] = useState('monitorings');
-  const [data, setData] = useState({});
-  const [loading, setLoading] = useState(true);
-  const [erreur, setErreur] = useState('');
-  const [modalOpen, setModalOpen] = useState(false);
-  const [editingItem, setEditingItem] = useState(null);
-
-  useEffect(() => {
-    async function loadData() {
-      setLoading(true);
-      setErreur('');
-      try {
   const [monitorings, services, categories, contacts] = await Promise.all([
     getMonitorings(),
     getServices(),
     getCategories(),
-          getContacts()
+    getContacts(),
   ]);
-        setData({
+  return {
     monitorings: Array.isArray(monitorings) ? monitorings : [],
     services: Array.isArray(services) ? services : [],
     categories: Array.isArray(categories) ? categories : [],
-          contacts: Array.isArray(contacts) ? contacts : []
+    contacts: Array.isArray(contacts) ? contacts : [],
-        });
+  };
+}
+
+export default function Admin() {
+  const [ongletActif, setOngletActif] = useState(REFERENTIELS[0].key);
+  const [donnees, setDonnees] = useState({});
+  const [loading, setLoading] = useState(true);
+  const [erreur, setErreur] = useState('');
+  const [modaleOuverte, setModaleOuverte] = useState(false);
+  const [elementEnEdition, setElementEnEdition] = useState(null);
+
+  const recharger = useCallback(async () => {
+    setErreur('');
+    try {
+      setDonnees(await chargerReferentiels());
     } catch (e) {
       setErreur(e.message || 'Erreur lors du chargement des données administratives.');
-      } finally {
-        setLoading(false);
     }
-    }
-    loadData();
   }, []);
 
-  function handleAdd() {
+  useEffect(() => {
-    setEditingItem(null);
+    let annule = false;
-    setModalOpen(true);
+    async function chargerAuMontage() {
+      try {
+        const resultat = await chargerReferentiels();
+        if (!annule) setDonnees(resultat);
+      } catch (e) {
+        if (!annule) setErreur(e.message || 'Erreur lors du chargement des données administratives.');
+      } finally {
+        if (!annule) setLoading(false);
+      }
+    }
+    chargerAuMontage();
+    return () => { annule = true; };
+  }, []);
+
+  const referentiel = REFERENTIELS.find(r => r.key === ongletActif);
+
+  function ouvrirCreation() {
+    setElementEnEdition(null);
+    setModaleOuverte(true);
   }
 
-  function handleEdit(item) {
+  function ouvrirEdition(element) {
-    setEditingItem(item);
+    setElementEnEdition(element);
-    setModalOpen(true);
+    setModaleOuverte(true);
   }
 
-  function handleDelete(item) {
+  async function handleEnregistrer(corps) {
-    // Simulation de suppression (pas d'API pour ça)
+    if (elementEnEdition) {
-    console.log('Supprimer', item);
+      await referentiel.modifier(elementEnEdition[referentiel.idField], corps);
+    } else {
+      await referentiel.creer(corps);
+    }
+    setModaleOuverte(false);
+    await recharger();
   }
 
-  const tabs = [
+  async function handleSupprimer(element) {
-    { key: 'monitorings', label: 'Monitorings' },
+    const action = referentiel.suppressionEstDesactivation ? 'Désactiver' : 'Supprimer';
-    { key: 'services', label: 'Services' },
+    const nom = element[referentiel.colonnes[0].key];
-    { key: 'categories', label: 'Catégories' },
+    if (!window.confirm(`${action} « ${nom} » ?`)) return;
-    { key: 'contacts', label: 'Contacts' }
+
+    setErreur('');
+    try {
+      await referentiel.supprimer(element[referentiel.idField]);
+      await recharger();
+    } catch (e) {
+      setErreur(e.message || 'La suppression a échoué.');
+    }
+  }
+
+  /* Affiche le libellé d'un référentiel lié plutôt que son identifiant brut. */
+  function libelleLie(nomReferentiel, id) {
+    const { idField, labelField } = LIBELLES_REFERENTIEL[nomReferentiel];
+    const trouve = (donnees[nomReferentiel] || []).find(item => item[idField] === id);
+    return trouve ? trouve[labelField] : id;
+  }
+
+  const colonnes = [
+    ...referentiel.colonnes.map(colonne => ({
+      key: colonne.key,
+      label: colonne.label,
+      render: colonne.referentiel
+        ? val => libelleLie(colonne.referentiel, val)
+        : undefined,
+    })),
+    {
+      key: 'actions',
+      label: 'Actions',
+      render: (val, row) => (
+        <div className={styles.actions}>
+          <button className={styles.actionBtn} onClick={() => ouvrirEdition(row)}>
+            <Edit size={14} />
+            Modifier
+          </button>
+          <button className={styles.actionBtn} onClick={() => handleSupprimer(row)}>
+            <Trash2 size={14} />
+            {referentiel.suppressionEstDesactivation ? 'Désactiver' : 'Supprimer'}
+          </button>
+        </div>
+      ),
+    },
   ];
 
-  const columns = {
-    monitorings: [
-      { key: 'monito_intitule', label: 'Nom' },
-      { key: 'id_service', label: 'Service' },
-      { key: 'id_categorie', label: 'Catégorie' },
-      { key: 'bdd_source', label: 'Source' },
-      { key: 'table_source', label: 'Table' },
-      {
-        key: 'actions',
-        label: 'Actions',
-        render: (val, row) => (
-          <div className={styles.actions}>
-            <button className={styles.actionBtn} onClick={() => handleEdit(row)}>
-              <Edit size={14} />
-              Modifier
-            </button>
-            <button className={styles.actionBtn} onClick={() => handleDelete(row)}>
-              <Trash2 size={14} />
-              Désactiver
-            </button>
-          </div>
-        )
-      }
-    ],
-    services: [
-      { key: 'nom_service', label: 'Nom' },
-      {
-        key: 'actions',
-        label: 'Actions',
-        render: (val, row) => (
-          <div className={styles.actions}>
-            <button className={styles.actionBtn} onClick={() => handleEdit(row)}>
-              <Edit size={14} />
-              Modifier
-            </button>
-            <button className={styles.actionBtn} onClick={() => handleDelete(row)}>
-              <Trash2 size={14} />
-              Désactiver
-            </button>
-          </div>
-        )
-      }
-    ],
-    categories: [
-      { key: 'intitule_categorie', label: 'Nom' },
-      {
-        key: 'actions',
-        label: 'Actions',
-        render: (val, row) => (
-          <div className={styles.actions}>
-            <button className={styles.actionBtn} onClick={() => handleEdit(row)}>
-              <Edit size={14} />
-              Modifier
-            </button>
-            <button className={styles.actionBtn} onClick={() => handleDelete(row)}>
-              <Trash2 size={14} />
-              Désactiver
-            </button>
-          </div>
-        )
-      }
-    ],
-    contacts: [
-      { key: 'intitule_contact', label: 'Intitulé' },
-      { key: 'nom', label: 'Nom' },
-      { key: 'prenom', label: 'Prénom' },
-      { key: 'mail', label: 'Email' },
-      { key: 'id_service', label: 'Service' },
-      {
-        key: 'actions',
-        label: 'Actions',
-        render: (val, row) => (
-          <div className={styles.actions}>
-            <button className={styles.actionBtn} onClick={() => handleEdit(row)}>
-              <Edit size={14} />
-              Modifier
-            </button>
-            <button className={styles.actionBtn} onClick={() => handleDelete(row)}>
-              <Trash2 size={14} />
-              Désactiver
-            </button>
-          </div>
-        )
-      }
-    ]
-  };
-
   if (loading) return <LoadingSpinner message="Chargement des données administratives..." />;
-  if (erreur) return <ErrorMessage message={erreur} />;
 
   return (
     <div className={styles.page}>
       <h1 className={styles.title}>Administration</h1>
 
-      {/* Onglets */}
       <div className={styles.tabs}>
-        {tabs.map(tab => (
+        {REFERENTIELS.map(item => (
           <button
-            key={tab.key}
+            key={item.key}
-            className={`${styles.tab} ${activeTab === tab.key ? styles.active : ''}`}
+            className={`${styles.tab} ${ongletActif === item.key ? styles.active : ''}`}
-            onClick={() => setActiveTab(tab.key)}
+            onClick={() => setOngletActif(item.key)}
           >
-            {tab.label}
+            {item.label}
           </button>
         ))}
       </div>
 
-      {/* Contenu de l'onglet actif */}
+      {erreur && <ErrorMessage message={erreur} />}
+
       <div className={styles.tabContent}>
         <div className={styles.header}>
-          <h2>{tabs.find(t => t.key === activeTab)?.label}</h2>
+          <h2>{referentiel.label}</h2>
-          <Button variant="primary" onClick={handleAdd}>
+          <Button variant="primary" onClick={ouvrirCreation}>
             <Plus size={14} />
             Ajouter
           </Button>
         </div>
 
         <DataTable
-          columns={columns[activeTab]}
+          columns={colonnes}
-          data={data[activeTab] || []}
+          data={donnees[ongletActif] || []}
           pageSize={50}
-          emptyMessage={`Aucun ${activeTab.slice(0, -1)} trouvé.`}
+          emptyMessage={`Aucun ${referentiel.singulier} trouvé.`}
         />
       </div>
 
-      {/* Modale */}
       <Modal
-        isOpen={modalOpen}
+        isOpen={modaleOuverte}
-        onClose={() => setModalOpen(false)}
+        onClose={() => setModaleOuverte(false)}
-        title={`${editingItem ? 'Modifier' : 'Ajouter'} ${tabs.find(t => t.key === activeTab)?.label.slice(0, -1)}`}
+        title={`${elementEnEdition ? 'Modifier' : 'Ajouter'} ${referentiel.singulier}`}
       >
-        <p>Formulaire à implémenter selon les besoins.</p>
+        <ReferentielForm
-        <div className={styles.modalActions}>
+          /* Remonte le formulaire à zéro quand on change d'onglet ou d'élément */
-          <Button variant="secondary" onClick={() => setModalOpen(false)}>
+          key={`${referentiel.key}-${elementEnEdition?.[referentiel.idField] ?? 'nouveau'}`}
-            Annuler
+          referentiel={referentiel}
-          </Button>
+          valeurInitiale={elementEnEdition}
-          <Button variant="primary" onClick={() => setModalOpen(false)}>
+          donnees={donnees}
-            Enregistrer
+          onEnregistrer={handleEnregistrer}
-          </Button>
+          onAnnuler={() => setModaleOuverte(false)}
-        </div>
+        />
       </Modal>
     </div>
   );

DataSentinel/src/pages/Admin/Admin.module.css

@@ -83,55 +83,33 @@
   color: var(--color-primary);
 }
 
-/* Modale */
+/* Formulaire de la modale (le conteneur vit dans Modal.module.css) */
-.modalOverlay {
+.field {
-  position: fixed;
+  margin-bottom: 16px;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
 }
 
-.modal {
+.label {
-  background-color: var(--color-white);
+  display: block;
-  border-radius: var(--radius);
+  margin-bottom: 6px;
-  border-top: 4px solid var(--color-primary);
+  font-size: 13px;
-  width: 90%;
+  font-weight: 500;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow-y: auto;
-}
-
-.modalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--color-gray-border);
-}
-
-.modalHeader h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
   color: var(--color-text);
 }
 
-.closeBtn {
+.input {
-  background: none;
+  width: 100%;
-  border: none;
+  padding: 8px 12px;
-  font-size: 24px;
+  border: 1px solid var(--color-gray-border);
-  color: var(--color-text-secondary);
+  border-radius: var(--radius);
-  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--color-text);
+  background-color: var(--color-white);
 }
 
-.modalBody {
+.input:focus {
-  padding: 24px;
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
 }
 
 .modalActions {

DataSentinel/src/pages/Admin/ReferentielForm.jsx

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import Button from '../../components/common/Button';
+import ErrorMessage from '../../components/common/ErrorMessage';
+import { LIBELLES_REFERENTIEL } from './referentielsConfig';
+import styles from './Admin.module.css';
+
+/* Formulaire générique piloté par la description des champs du référentiel
+   (voir referentielsConfig.js) : les 4 onglets partagent ce composant. */
+export default function ReferentielForm({ referentiel, valeurInitiale, donnees, onEnregistrer, onAnnuler }) {
+  const [valeurs, setValeurs] = useState(() =>
+    Object.fromEntries(
+      referentiel.champs.map(champ => [champ.name, valeurInitiale?.[champ.name] ?? ''])
+    )
+  );
+  const [enCours, setEnCours] = useState(false);
+  const [erreur, setErreur] = useState('');
+
+  function handleChange(name, valeur) {
+    setValeurs(precedentes => ({ ...precedentes, [name]: valeur }));
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    setErreur('');
+    setEnCours(true);
+    try {
+      /* Les identifiants de référentiel arrivent en chaîne depuis <select> :
+         l'API attend des entiers. */
+      const corps = Object.fromEntries(
+        referentiel.champs.map(champ => [
+          champ.name,
+          champ.type === 'select' ? Number(valeurs[champ.name]) : valeurs[champ.name],
+        ])
+      );
+      await onEnregistrer(corps);
+    } catch (e) {
+      setErreur(e.message || "L'enregistrement a échoué.");
+    } finally {
+      setEnCours(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {referentiel.champs.map(champ => (
+        <div key={champ.name} className={styles.field}>
+          <label className={styles.label} htmlFor={champ.name}>{champ.label}</label>
+          {champ.type === 'select' ? (
+            <select
+              id={champ.name}
+              className={styles.input}
+              value={valeurs[champ.name]}
+              onChange={e => handleChange(champ.name, e.target.value)}
+              required={champ.required}
+            >
+              <option value="">— Choisir —</option>
+              {(donnees[champ.options] || []).map(option => {
+                const { idField, labelField } = LIBELLES_REFERENTIEL[champ.options];
+                return (
+                  <option key={option[idField]} value={option[idField]}>
+                    {option[labelField]}
+                  </option>
+                );
+              })}
+            </select>
+          ) : (
+            <input
+              id={champ.name}
+              type={champ.type}
+              className={styles.input}
+              value={valeurs[champ.name]}
+              onChange={e => handleChange(champ.name, e.target.value)}
+              required={champ.required}
+            />
+          )}
+        </div>
+      ))}
+
+      {erreur && <ErrorMessage message={erreur} />}
+
+      <div className={styles.modalActions}>
+        <Button variant="secondary" type="button" onClick={onAnnuler} disabled={enCours}>
+          Annuler
+        </Button>
+        <Button variant="primary" type="submit" disabled={enCours}>
+          {enCours ? 'Enregistrement…' : 'Enregistrer'}
+        </Button>
+      </div>
+    </form>
+  );
+}

DataSentinel/src/pages/Admin/referentielsConfig.js

@@ -0,0 +1,89 @@
+import {
+  createService, updateService, deleteService,
+  createCategorie, updateCategorie, deleteCategorie,
+  createContact, updateContact, deleteContact,
+  createMonitoring, updateMonitoring, desactiverMonitoring,
+} from '../../services/api';
+
+/* Description déclarative des 4 référentiels administrables.
+   Les colonnes du tableau, les champs du formulaire et les appels API sont
+   décrits ici plutôt que répétés onglet par onglet : les 4 onglets partagent
+   ainsi un seul tableau et un seul formulaire. */
+export const REFERENTIELS = [
+  {
+    key: 'monitorings',
+    label: 'Monitorings',
+    singulier: 'monitoring',
+    idField: 'id_monito',
+    /* Désactivation logique : TABLE_FINAL référence le monitoring. */
+    suppressionEstDesactivation: true,
+    colonnes: [
+      { key: 'monito_intitule', label: 'Nom' },
+      { key: 'id_service', label: 'Service', referentiel: 'services' },
+      { key: 'id_categorie', label: 'Catégorie', referentiel: 'categories' },
+      { key: 'bdd_source', label: 'Source' },
+      { key: 'table_source', label: 'Table' },
+    ],
+    champs: [
+      { name: 'monito_intitule', label: 'Nom', type: 'text', required: true },
+      { name: 'id_service', label: 'Service', type: 'select', options: 'services', required: true },
+      { name: 'id_categorie', label: 'Catégorie', type: 'select', options: 'categories', required: true },
+      { name: 'table_source', label: 'Table source', type: 'text', required: true },
+      { name: 'bdd_source', label: 'Base source', type: 'text', required: true },
+    ],
+    creer: createMonitoring,
+    modifier: updateMonitoring,
+    supprimer: desactiverMonitoring,
+  },
+  {
+    key: 'services',
+    label: 'Services',
+    singulier: 'service',
+    idField: 'id_service',
+    colonnes: [{ key: 'nom_service', label: 'Nom' }],
+    champs: [{ name: 'nom_service', label: 'Nom du service', type: 'text', required: true }],
+    creer: createService,
+    modifier: updateService,
+    supprimer: deleteService,
+  },
+  {
+    key: 'categories',
+    label: 'Catégories',
+    singulier: 'catégorie',
+    idField: 'id_categorie',
+    colonnes: [{ key: 'intitule_categorie', label: 'Nom' }],
+    champs: [{ name: 'intitule_categorie', label: 'Intitulé', type: 'text', required: true }],
+    creer: createCategorie,
+    modifier: updateCategorie,
+    supprimer: deleteCategorie,
+  },
+  {
+    key: 'contacts',
+    label: 'Contacts',
+    singulier: 'contact',
+    idField: 'id_contact',
+    colonnes: [
+      { key: 'intitule_contact', label: 'Intitulé' },
+      { key: 'nom', label: 'Nom' },
+      { key: 'prenom', label: 'Prénom' },
+      { key: 'mail', label: 'Email' },
+      { key: 'id_service', label: 'Service', referentiel: 'services' },
+    ],
+    champs: [
+      { name: 'intitule_contact', label: 'Intitulé', type: 'text', required: true },
+      { name: 'nom', label: 'Nom', type: 'text', required: true },
+      { name: 'prenom', label: 'Prénom', type: 'text', required: true },
+      { name: 'mail', label: 'Email', type: 'email', required: true },
+      { name: 'id_service', label: 'Service', type: 'select', options: 'services', required: true },
+    ],
+    creer: createContact,
+    modifier: updateContact,
+    supprimer: deleteContact,
+  },
+];
+
+/* Libellés des listes déroulantes et des colonnes qui affichent un identifiant. */
+export const LIBELLES_REFERENTIEL = {
+  services: { idField: 'id_service', labelField: 'nom_service' },
+  categories: { idField: 'id_categorie', labelField: 'intitule_categorie' },
+};

DataSentinel/src/pages/Dashboard/Dashboard.jsx

@@ -4,20 +4,11 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 import { RefreshCw } from 'lucide-react';
 import { getDashboard, getDashboardSummary, getDashboardFiltres } from '../../services/api';
 import MonitoringCard from '../../components/common/MonitoringCard';
+import KpiCard from '../../components/common/KpiCard';
 import LoadingSpinner from '../../components/common/LoadingSpinner';
 import ErrorMessage from '../../components/common/ErrorMessage';
 import styles from './Dashboard.module.css';
 
-/* Carte KPI affichant un indicateur clé */
-function KpiCard({ label, value, color }) {
-  return (
-    <div className={styles.kpiCard}>
-      <span className={styles.kpiValue} style={{ color }}>{value}</span>
-      <span className={styles.kpiLabel}>{label}</span>
-    </div>
-  );
-}
-
 export default function Dashboard() {
   const [summary, setSummary] = useState(null);
   const [monitorings, setMonitorings] = useState([]);
@@ -27,6 +18,7 @@ export default function Dashboard() {
   const [filtreCategorie, setFiltreCategorie] = useState('');
   const [loading, setLoading] = useState(true);
   const [erreur, setErreur] = useState('');
+  const [rafraichissement, setRafraichissement] = useState(0);
 
   /* Chargement initial des filtres.
      On n'utilise pas les référentiels SERVICE / CATEGORIE complets : ils
@@ -61,39 +53,57 @@ export default function Dashboard() {
   /* Changer de service peut rendre la catégorie sélectionnée sans résultat :
      on la remet à zéro dans le même rendu, pour ne déclencher qu'un seul appel. */
   function handleServiceChange(service) {
+    setLoading(true);
     setFiltreService(service);
     if (filtreCategorie && !categoriesDisponibles(service).includes(filtreCategorie)) {
       setFiltreCategorie('');
     }
   }
 
-  /* Chargement des données dashboard */
+  function handleCategorieChange(categorie) {
-  const loadData = useCallback(async () => {
     setLoading(true);
-    setErreur('');
+    setFiltreCategorie(categorie);
+  }
+
+  /* Le bouton Actualiser relance l'effet en changeant cette valeur. */
+  function handleActualiser() {
+    setLoading(true);
+    setRafraichissement(compteur => compteur + 1);
+  }
+
+  /* Les données sont rechargées à chaque changement de filtre. L'indicateur de
+     chargement est allumé par les gestionnaires d'événement ci-dessus, jamais
+     dans l'effet : y appeler setState de façon synchrone provoquerait un rendu
+     en cascade. */
+  useEffect(() => {
+    let annule = false;
+
+    async function charger() {
       try {
         const [sum, data] = await Promise.all([
           getDashboardSummary(),
           getDashboard(filtreService, filtreCategorie),
         ]);
+        if (annule) return;
         setSummary(sum);
         setMonitorings(Array.isArray(data) ? data : []);
+        setErreur('');
       } catch (e) {
-      setErreur(e.message || 'Erreur lors du chargement du dashboard.');
+        if (!annule) setErreur(e.message || 'Erreur lors du chargement du dashboard.');
       } finally {
-      setLoading(false);
+        if (!annule) setLoading(false);
+      }
     }
-  }, [filtreService, filtreCategorie]);
 
-  useEffect(() => {
+    charger();
-    loadData();
+    return () => { annule = true; };
-  }, [loadData]);
+  }, [filtreService, filtreCategorie, rafraichissement]);
 
   return (
     <div className={styles.page}>
       <div className={styles.pageHeader}>
         <h1 className={styles.title}>Dashboard</h1>
-        <button className={styles.refreshBtn} onClick={loadData} disabled={loading}>
+        <button className={styles.refreshBtn} onClick={handleActualiser} disabled={loading}>
           <RefreshCw size={14} className={loading ? styles.spinning : ''} />
           Actualiser
         </button>
@@ -140,7 +150,7 @@ export default function Dashboard() {
         <select
           className={styles.select}
           value={filtreCategorie}
-          onChange={e => setFiltreCategorie(e.target.value)}
+          onChange={e => handleCategorieChange(e.target.value)}
         >
           <option value="">Toutes les catégories</option>
           {categories.map(c => (
@@ -153,7 +163,7 @@ export default function Dashboard() {
       {loading ? (
         <LoadingSpinner message="Chargement du dashboard..." />
       ) : erreur ? (
-        <ErrorMessage message={erreur} onRetry={loadData} />
+        <ErrorMessage message={erreur} onRetry={handleActualiser} />
       ) : (
         <>
           {monitorings.length === 0 ? (

DataSentinel/src/pages/Dashboard/Dashboard.module.css

@@ -55,29 +55,6 @@
   margin-bottom: 32px;
 }
 
-.kpiCard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
-  background: var(--color-white);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-}
-
-.kpiValue {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1;
-  margin-bottom: 6px;
-}
-
-.kpiLabel {
-  font-size: 12px;
-  color: var(--color-muted, #888);
-  text-align: center;
-}
-
 .filtres {
   display: flex;
   gap: 12px;
@@ -131,10 +108,6 @@
     gap: 10px;
   }
 
-  .kpiValue {
-    font-size: 28px;
-  }
-
   .filtres {
     flex-direction: column;
   }

DataSentinel/src/pages/Documentation/Documentation.jsx

@@ -1,6 +1,6 @@
 // src/pages/Documentation/Documentation.jsx
 // Page documentation technique de Data Sentinel
-import { ExternalLink, Book, Code, Database, Shield } from 'lucide-react';
+import { Book, Code, Database, Shield } from 'lucide-react';
 import styles from './Documentation.module.css';
 
 const sections = [

DataSentinel/src/pages/Login/Login.jsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../context/AuthContext';
+import { useAuth } from '../../context/useAuth';
 import styles from './Login.module.css';
 
 /* Génère deux entiers aléatoires pour le captcha additif */

DataSentinel/src/pages/MonitoringDetail/MonitoringDetail.jsx

@@ -9,15 +9,9 @@ import LoadingSpinner from '../../components/common/LoadingSpinner';
 import ErrorMessage from '../../components/common/ErrorMessage';
 import Badge from '../../components/common/Badge';
 import Button from '../../components/common/Button';
+import { getStatutMonitoring } from '../../utils/statutMonitoring';
 import styles from './MonitoringDetail.module.css';
 
-/* Détermine le statut selon le nombre d'erreurs */
-function getStatut(nbErreurs) {
-  if (nbErreurs === 0) return { label: 'OK', variant: 'ok' };
-  if (nbErreurs < 10) return { label: 'Attention', variant: 'warning' };
-  return { label: 'Critique', variant: 'critical' };
-}
-
 export default function MonitoringDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
@@ -72,7 +66,7 @@ export default function MonitoringDetail() {
   if (loading) return <LoadingSpinner message="Chargement du monitoring..." />;
   if (erreur) return <ErrorMessage message={erreur} />;
 
-  const statut = getStatut(count);
+  const statut = getStatutMonitoring(count);
 
   return (
     <div className={styles.page}>

DataSentinel/src/pages/ServiceMonitorings/ServiceMonitorings.jsx

@@ -7,6 +7,7 @@ import DataTable from '../../components/common/DataTable';
 import LoadingSpinner from '../../components/common/LoadingSpinner';
 import ErrorMessage from '../../components/common/ErrorMessage';
 import Button from '../../components/common/Button';
+import { buildMonitoringColumns } from '../../utils/monitoringColumns';
 import styles from './ServiceMonitorings.module.css';
 
 export default function ServiceMonitorings({ serviceLabel, serviceName }) {
@@ -34,22 +35,7 @@ export default function ServiceMonitorings({ serviceLabel, serviceName }) {
   if (loading) return <LoadingSpinner message={`Chargement des monitorings ${serviceLabel.toLowerCase()}...`} />;
   if (erreur) return <ErrorMessage message={erreur} />;
 
-  const columns = [
+  const columns = buildMonitoringColumns(navigate);
-    { key: 'nom', label: 'Monitoring' },
-    { key: 'service', label: 'Service' },
-    { key: 'categorie', label: 'Catégorie' },
-    { key: 'bdd_source', label: 'Source' },
-    { key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 },
-    {
-      key: 'actions',
-      label: 'Actions',
-      render: (val, row) => (
-        <Button variant="link" onClick={() => navigate(`/monitoring/${row.id || row.id_monito}`)}>
-          Voir détail →
-        </Button>
-      )
-    }
-  ];
 
   return (
     <div className={styles.page}>

DataSentinel/src/pages/Users/Users.jsx

@@ -43,9 +43,25 @@ export default function Users() {
     }
   }, []);
 
+  /* Chargement initial. Le drapeau `annule` évite d'écrire dans un composant
+     déjà démonté si l'utilisateur quitte la page pendant la requête. */
   useEffect(() => {
-    charger();
+    let annule = false;
-  }, [charger]);
+
+    async function chargerAuMontage() {
+      try {
+        const data = await getUsers();
+        if (!annule) setUsers(Array.isArray(data) ? data : []);
+      } catch (e) {
+        if (!annule) setErreur(e.message || 'Erreur lors du chargement des utilisateurs.');
+      } finally {
+        if (!annule) setLoading(false);
+      }
+    }
+
+    chargerAuMontage();
+    return () => { annule = true; };
+  }, []);
 
   /* Ouverture des modales */
   function ouvrirCreation() {

DataSentinel/src/pages/VueConso/VueConso.jsx

@@ -9,15 +9,10 @@ import DataTable from '../../components/common/DataTable';
 import LoadingSpinner from '../../components/common/LoadingSpinner';
 import ErrorMessage from '../../components/common/ErrorMessage';
 import Button from '../../components/common/Button';
+import { getStatutMonitoring } from '../../utils/statutMonitoring';
+import { buildMonitoringColumns } from '../../utils/monitoringColumns';
 import styles from './VueConso.module.css';
 
-/* Détermine la couleur selon le statut */
-function getStatusColor(nbErreurs) {
-  if (nbErreurs === 0) return 'var(--color-ok)';
-  if (nbErreurs < 10) return 'var(--color-warning)';
-  return 'var(--color-primary)';
-}
-
 export default function VueConso() {
   const navigate = useNavigate();
   const [data, setData] = useState([]);
@@ -47,26 +42,10 @@ export default function VueConso() {
   const chartData = data.map(item => ({
     name: item.nom || item.nom_monito || item.libelle || 'Monitoring',
     erreurs: item.nb_erreurs ?? item.count ?? 0,
-    fill: getStatusColor(item.nb_erreurs ?? item.count ?? 0)
+    fill: getStatutMonitoring(item.nb_erreurs ?? item.count ?? 0).color
   }));
 
-  /* Colonnes du tableau */
+  const columns = buildMonitoringColumns(navigate);
-  const columns = [
-    { key: 'nom', label: 'Monitoring' },
-    { key: 'service', label: 'Service' },
-    { key: 'categorie', label: 'Catégorie' },
-    { key: 'bdd_source', label: 'Source' },
-    { key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 },
-    {
-      key: 'actions',
-      label: 'Actions',
-      render: (val, row) => (
-        <Button variant="link" onClick={() => navigate(`/monitoring/${row.id || row.id_monito}`)}>
-          Voir détail →
-        </Button>
-      )
-    }
-  ];
 
   return (
     <div className={styles.page}>

DataSentinel/src/services/api.js

@@ -3,9 +3,11 @@
 /* Utilise la variable d'environnement Vite si définie, sinon localhost par défaut */
 const BASE_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:8000';
 
-/* Clés de stockage local pour le token JWT et l'utilisateur connecté */
+/* Clés de stockage local pour le token JWT et l'utilisateur connecté.
+   USER_KEY est exporté : AuthContext lit/écrit la même entrée, et une clé
+   dupliquée des deux côtés divergerait silencieusement au premier renommage. */
 const TOKEN_KEY = 'ds_token';
-const USER_KEY = 'ds_user';
+export const USER_KEY = 'ds_user';
 
 /* Helpers de gestion du token JWT dans le localStorage */
 export function getToken() {
@@ -188,6 +190,58 @@ export async function getContacts(id_service) {
   return fetchApi('/contacts', { id_service });
 }
 
+/* ---------- Administration du référentiel (réservé Admin) ---------- */
+
+export async function createService(body) {
+  return sendJson('/services', 'POST', body);
+}
+
+export async function updateService(id_service, body) {
+  return sendJson(`/services/${id_service}`, 'PUT', body);
+}
+
+export async function deleteService(id_service) {
+  return sendJson(`/services/${id_service}`, 'DELETE');
+}
+
+export async function createCategorie(body) {
+  return sendJson('/categories', 'POST', body);
+}
+
+export async function updateCategorie(id_categorie, body) {
+  return sendJson(`/categories/${id_categorie}`, 'PUT', body);
+}
+
+export async function deleteCategorie(id_categorie) {
+  return sendJson(`/categories/${id_categorie}`, 'DELETE');
+}
+
+export async function createContact(body) {
+  return sendJson('/contacts', 'POST', body);
+}
+
+export async function updateContact(id_contact, body) {
+  return sendJson(`/contacts/${id_contact}`, 'PUT', body);
+}
+
+export async function deleteContact(id_contact) {
+  return sendJson(`/contacts/${id_contact}`, 'DELETE');
+}
+
+export async function createMonitoring(body) {
+  return sendJson('/monitorings', 'POST', body);
+}
+
+export async function updateMonitoring(id_monito, body) {
+  return sendJson(`/monitorings/${id_monito}`, 'PUT', body);
+}
+
+/* Désactivation (actif = 0) : l'historique référence le monitoring,
+   il n'est jamais supprimé physiquement. */
+export async function desactiverMonitoring(id_monito) {
+  return sendJson(`/monitorings/${id_monito}`, 'DELETE');
+}
+
 /* Récupère la nomenclature (monitorings), filtrable par service et catégorie */
 export async function getMonitorings(id_service, id_categorie) {
   const data = await fetchApi('/monitorings', { id_service, id_categorie });

DataSentinel/src/utils/monitoringColumns.jsx

@@ -0,0 +1,24 @@
+import Button from '../components/common/Button';
+
+/* Colonnes du tableau de monitorings partagées par VueConso et
+   ServiceMonitorings (Contrat/Fournisseur) : même jeu de données
+   (GET /dashboard), même tableau. Centralisé pour qu'une évolution des
+   colonnes (ajout, renommage) ne soit faite qu'à un seul endroit. */
+export function buildMonitoringColumns(navigate) {
+  return [
+    { key: 'nom', label: 'Monitoring' },
+    { key: 'service', label: 'Service' },
+    { key: 'categorie', label: 'Catégorie' },
+    { key: 'bdd_source', label: 'Source' },
+    { key: 'nb_erreurs', label: 'Erreurs', render: (val) => val ?? 0 },
+    {
+      key: 'actions',
+      label: 'Actions',
+      render: (val, row) => (
+        <Button variant="link" onClick={() => navigate(`/monitoring/${row.id || row.id_monito}`)}>
+          Voir détail →
+        </Button>
+      )
+    }
+  ];
+}

DataSentinel/src/utils/statutMonitoring.js

@@ -0,0 +1,16 @@
+/* Règle de statut partagée : un monitoring est "OK" sans erreur, "Attention"
+   en-dessous du seuil, "Critique" au-delà. Centralisé ici pour que le seuil
+   ne soit corrigé qu'à un seul endroit (il était dupliqué dans MonitoringCard,
+   MonitoringDetail et VueConso, avec le risque que l'une des copies diverge). */
+
+export const SEUIL_ATTENTION = 10;
+
+export function getStatutMonitoring(nbErreurs) {
+  if (nbErreurs === 0) {
+    return { label: 'OK', variant: 'ok', color: 'var(--color-ok)' };
+  }
+  if (nbErreurs < SEUIL_ATTENTION) {
+    return { label: 'Attention', variant: 'warning', color: 'var(--color-warning)' };
+  }
+  return { label: 'Critique', variant: 'critical', color: 'var(--color-primary)' };
+}