feat(front): rend l'écran d'administration réellement fonctionnel

Les boutons Modifier et Désactiver de la page Administration
n'appelaient rien : handleDelete se contentait d'un console.log et le
bouton Enregistrer de la modale ne faisait que la refermer. L'écran
donnait l'illusion d'un CRUD.

Branche les 4 onglets sur les endpoints POST/PUT/DELETE ajoutés côté
API, avec confirmation avant suppression, rechargement après
enregistrement et remontée des erreurs de l'API (dont le refus 409
quand des enregistrements sont rattachés).

Les 4 blocs de colonnes de tableau, quasi identiques d'un onglet à
l'autre, laissent place à une description déclarative
(referentielsConfig.js) : un seul tableau et un seul formulaire
générique (ReferentielForm) servent les 4 référentiels. Les colonnes
qui portaient un identifiant brut affichent maintenant le libellé.

La modale, jusqu'ici déclarée dans Admin.jsx, devient un composant
commun réutilisable.

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/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/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 });