test(front): étend la couverture de 8 à 41 tests

Les fonctionnalités ajoutées récemment n'étaient couvertes par aucun test,
et deux utilitaires historiques ne l'avaient jamais été.

- statutMonitoring : bornes du seuil testées de part et d'autre, là où une
  confusion entre < et <= se verrait.
- dates : protège la correction du décalage de fuseau (toISOString basculait
  en UTC, le 1er janvier local devenait le 31 décembre). Les helpers sont
  sortis de Historique.jsx vers utils/dates.js, un fichier de composant ne
  pouvant pas exporter autre chose sans casser le rafraîchissement à chaud.
- exportToCSV : échappement des virgules, guillemets et sauts de ligne, et
  conservation du zéro, qui est falsy alors que « 0 erreur » est justement
  l'information utile. Cet utilitaire sert quatre écrans et n'avait aucun test.
- Dashboard : les menus ne proposent que les valeurs ayant des résultats, les
  catégories se restreignent au service choisi, et une catégorie devenue sans
  résultat est réinitialisée. Vérifié par mutation : casser la cascade fait
  bien échouer deux tests.
- Admin : création, modification pré-remplie, confirmation avant suppression,
  remontée du refus 409 de l'API, désactivation et non suppression d'un
  monitoring, affichage des libellés à la place des identifiants.

Corrige un défaut révélé par ces tests : referentielsConfig capturait les
fonctions de l'API à l'import, figeant l'implémentation. Elles sont désormais
résolues à l'appel, ce qui découple la configuration du module d'API.

.gitea/workflows/build.yml

@@ -0,0 +1,42 @@
+name: Build & Deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch: {}
+
+env:
+  IMAGE: git.nfteam.ovh/neckfire/datasentinel-front
+  VITE_API_URL: https://datasentinel-api.nfteam.ovh
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Les tests vitest tournent pendant le build Docker (RUN pnpm test) :
+      # pas de bind-mount (incompatible docker-in-docker du runner).
+      - name: Build & push image
+        run: |
+          set -e
+          echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login git.nfteam.ovh -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+          docker build --build-arg VITE_API_URL="${VITE_API_URL}" \
+            --build-arg APP_BUILD="${GITHUB_SHA::12}" \
+            -t "${IMAGE}:latest" -t "${IMAGE}:${GITHUB_SHA::12}" ./DataSentinel
+          docker push --all-tags "${IMAGE}"
+          echo "pushed ${IMAGE}"
+
+      - name: Notify ntfy (success/failure)
+        if: always()
+        run: |
+          if [ "${{ job.status }}" = "success" ]; then EMOJI="white_check_mark"; PRIO="default"; else EMOJI="rotating_light"; PRIO="high"; fi
+          curl -s \
+            -H "Authorization: Bearer ${{ secrets.NTFY_TOKEN }}" \
+            -H "Title: ${GITHUB_REPOSITORY} — ${{ job.status }}" \
+            -H "Priority: ${PRIO}" \
+            -H "Tags: ${EMOJI}" \
+            -H "Click: ${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions" \
+            -d "${GITHUB_WORKFLOW} sur ${GITHUB_REF_NAME} (run #${GITHUB_RUN_NUMBER}) : ${{ job.status }}" \
+            "${{ secrets.NTFY_URL }}/${{ secrets.NTFY_TOPIC }}" || true

DataSentinel/Dockerfile

@@ -0,0 +1,22 @@
+# Front Data Sentinel — build Vite (pnpm) puis service statique via nginx.
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN corepack enable && pnpm install --frozen-lockfile
+COPY . .
+# Tests (vitest) exécutés pendant le build : un test rouge casse le build.
+RUN pnpm test
+# URL de l'API injectée au build (Vite inline les import.meta.env.VITE_*).
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
+RUN pnpm build
+
+# SHA du commit construit, servi sur /version.json : permet de vérifier quelle
+# version est réellement déployée sans se fier au cache du navigateur.
+ARG APP_BUILD=local
+RUN printf '{"build":"%s"}' "$APP_BUILD" > /app/dist/version.json
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80

DataSentinel/nginx.conf

@@ -0,0 +1,14 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # SPA : toutes les routes retombent sur index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+}

DataSentinel/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "lucide-react": "^1.8.0",
@@ -25,6 +27,11 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.5.0",
-    "vite": "^8.0.10"
+    "vite": "^8.0.10",
+    "vitest": "^4.1.9",
+    "jsdom": "^29.1.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/user-event": "^14.6.1"
   }
 }

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';
@@ -12,14 +13,22 @@ import Fournisseur from './pages/Fournisseur/Fournisseur';
 import Historique from './pages/Historique/Historique';
 import Admin from './pages/Admin/Admin';
 import Users from './pages/Users/Users';
+import Journal from './pages/Journal/Journal';
 import Documentation from './pages/Documentation/Documentation';
 import MentionsLegales from './pages/MentionsLegales/MentionsLegales';
 import CGU from './pages/CGU/CGU';
 
-/* Composant pour protéger les routes nécessitant une authentification */
+/* Composant pour protéger les routes nécessitant une authentification.
-function ProtectedRoute({ children }) {
+ * requireRole (optionnel) : restreint l'accès à un rôle précis (ex. "Admin"). */
+function ProtectedRoute({ children, requireRole }) {
   const { user } = useAuth();
-  return user ? children : <Navigate to="/login" replace />;
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+  if (requireRole && user.role !== requireRole) {
+    return <Navigate to="/dashboard" replace />;
+  }
+  return children;
 }
 
 /* Composant pour les routes publiques (login) */
@@ -61,8 +70,30 @@ function App() {
             <Route path="contrat" element={<Contrat />} />
             <Route path="fournisseur" element={<Fournisseur />} />
             <Route path="historique" element={<Historique />} />
-            <Route path="admin" element={<Admin />} />
+            <Route
-            <Route path="utilisateurs" element={<Users />} />
+              path="admin"
+              element={
+                <ProtectedRoute requireRole="Admin">
+                  <Admin />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="utilisateurs"
+              element={
+                <ProtectedRoute requireRole="Admin">
+                  <Users />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="journal"
+              element={
+                <ProtectedRoute requireRole="Admin">
+                  <Journal />
+                </ProtectedRoute>
+              }
+            />
             <Route path="documentation" element={<Documentation />} />
           </Route>
 

DataSentinel/src/__tests__/Admin.test.jsx

@@ -0,0 +1,174 @@
+/* Écran d'administration des référentiels.
+
+   Avant correction, les boutons Modifier / Désactiver n'appelaient rien
+   (console.log) et « Enregistrer » se contentait de fermer la modale. Ces
+   tests vérifient que chaque action atteint réellement l'API et que les
+   erreurs métier remontent à l'utilisateur. */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Admin from '../pages/Admin/Admin';
+import * as api from '../services/api';
+
+const SERVICES = [
+  { id_service: 1, nom_service: 'Contrat' },
+  { id_service: 2, nom_service: 'Fournisseur' },
+];
+const CATEGORIES = [{ id_categorie: 1, intitule_categorie: 'Tiers-payeurs' }];
+const MONITORINGS = [{
+  id_monito: 1, monito_intitule: 'Erreurs tiers payeurs', id_service: 1,
+  id_categorie: 1, table_source: 'MONITO_TIERS_PAYEURS', bdd_source: 'Sage',
+}];
+
+function stubLectures() {
+  vi.spyOn(api, 'getServices').mockResolvedValue(SERVICES);
+  vi.spyOn(api, 'getCategories').mockResolvedValue(CATEGORIES);
+  vi.spyOn(api, 'getContacts').mockResolvedValue([]);
+  vi.spyOn(api, 'getMonitorings').mockResolvedValue(MONITORINGS);
+}
+
+async function ouvrirOnglet(utilisateur, nom) {
+  await utilisateur.click(screen.getByRole('button', { name: nom }));
+}
+
+describe('Admin — CRUD des référentiels', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    stubLectures();
+    vi.spyOn(window, 'confirm').mockReturnValue(true);
+  });
+
+  it('crée un service via l’API et recharge la liste', async () => {
+    const creation = vi.spyOn(api, 'createService').mockResolvedValue({ id_service: 3 });
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+    await utilisateur.click(screen.getByRole('button', { name: /Ajouter/ }));
+
+    await utilisateur.type(screen.getByLabelText('Nom du service'), 'Comptabilité');
+    await utilisateur.click(screen.getByRole('button', { name: 'Enregistrer' }));
+
+    await waitFor(() => {
+      expect(creation).toHaveBeenCalledWith({ nom_service: 'Comptabilité' });
+    });
+    /* Rechargement après écriture : la liste doit être redemandée. */
+    expect(api.getServices).toHaveBeenCalledTimes(2);
+  });
+
+  it('pré-remplit le formulaire de modification avec la ligne choisie', async () => {
+    vi.spyOn(api, 'updateService').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Fournisseur').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Modifier/ }));
+
+    expect(screen.getByLabelText('Nom du service')).toHaveValue('Fournisseur');
+  });
+
+  it('envoie l’identifiant de la ligne lors d’une modification', async () => {
+    const modification = vi.spyOn(api, 'updateService').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Fournisseur').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Modifier/ }));
+    await utilisateur.click(screen.getByRole('button', { name: 'Enregistrer' }));
+
+    await waitFor(() => {
+      expect(modification).toHaveBeenCalledWith(2, { nom_service: 'Fournisseur' });
+    });
+  });
+
+  it('demande confirmation avant de supprimer, et n’appelle rien si on refuse', async () => {
+    window.confirm.mockReturnValue(false);
+    const suppression = vi.spyOn(api, 'deleteService').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Contrat').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Supprimer/ }));
+
+    expect(window.confirm).toHaveBeenCalled();
+    expect(suppression).not.toHaveBeenCalled();
+  });
+
+  it('affiche le refus de l’API quand des enregistrements sont rattachés', async () => {
+    /* Cas réel : l'API renvoie 409 avec le décompte des rattachements. */
+    vi.spyOn(api, 'deleteService').mockRejectedValue(
+      new Error('Erreur 409: Suppression impossible : 5 monitoring(s) rattachés.'),
+    );
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await ouvrirOnglet(utilisateur, 'Services');
+
+    const ligne = screen.getByText('Contrat').closest('tr');
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Supprimer/ }));
+
+    expect(await screen.findByText(/5 monitoring\(s\) rattachés/)).toBeInTheDocument();
+  });
+
+  it('parle de désactivation, pas de suppression, pour un monitoring', async () => {
+    /* TABLE_FINAL référence le monitoring : il n'est jamais supprimé. */
+    const desactivation = vi.spyOn(api, 'desactiverMonitoring').mockResolvedValue({});
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+
+    const ligne = screen.getByText('Erreurs tiers payeurs').closest('tr');
+    expect(within(ligne).getByRole('button', { name: /Désactiver/ })).toBeInTheDocument();
+
+    await utilisateur.click(within(ligne).getByRole('button', { name: /Désactiver/ }));
+    await waitFor(() => expect(desactivation).toHaveBeenCalledWith(1));
+  });
+
+  it('affiche le libellé du service plutôt que son identifiant brut', async () => {
+    render(<Admin />);
+    await screen.findByText('Administration');
+
+    const ligne = screen.getByText('Erreurs tiers payeurs').closest('tr');
+    /* id_service = 1 doit s'afficher « Contrat ». */
+    expect(within(ligne).getByText('Contrat')).toBeInTheDocument();
+  });
+
+  it('convertit en entier les identifiants issus des listes déroulantes', async () => {
+    /* Un <select> renvoie une chaîne ; l'API attend un entier. */
+    const creation = vi.spyOn(api, 'createMonitoring').mockResolvedValue({ id_monito: 9 });
+    const utilisateur = userEvent.setup();
+    render(<Admin />);
+
+    await screen.findByText('Administration');
+    await utilisateur.click(screen.getByRole('button', { name: /Ajouter/ }));
+
+    await utilisateur.type(screen.getByLabelText('Nom'), 'Nouveau monitoring');
+    await utilisateur.selectOptions(screen.getByLabelText('Service'), '2');
+    await utilisateur.selectOptions(screen.getByLabelText('Catégorie'), '1');
+    await utilisateur.type(screen.getByLabelText('Table source'), 'MONITO_TEST');
+    await utilisateur.type(screen.getByLabelText('Base source'), 'Sage');
+    await utilisateur.click(screen.getByRole('button', { name: 'Enregistrer' }));
+
+    await waitFor(() => {
+      expect(creation).toHaveBeenCalledWith({
+        monito_intitule: 'Nouveau monitoring',
+        id_service: 2,
+        id_categorie: 1,
+        table_source: 'MONITO_TEST',
+        bdd_source: 'Sage',
+      });
+    });
+  });
+});

DataSentinel/src/__tests__/AuthContext.test.jsx

@@ -0,0 +1,50 @@
+/* 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 } from '../context/AuthContext';
+import { useAuth } from '../context/useAuth';
+import * as api from '../services/api';
+
+describe('AuthContext', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  function wrapper({ children }) {
+    return <AuthProvider>{children}</AuthProvider>;
+  }
+
+  it('login renseigne l\'utilisateur, logout le vide', async () => {
+    const fakeUser = { username: 'bob', role: 'Consultant' };
+    vi.spyOn(api, 'login').mockResolvedValue(fakeUser);
+    const clearSpy = vi.spyOn(api, 'clearToken').mockImplementation(() => {});
+
+    const { result } = renderHook(() => useAuth(), { wrapper });
+
+    expect(result.current.user).toBeNull();
+    expect(result.current.isAuthenticated).toBe(false);
+
+    await act(async () => {
+      await result.current.login('bob', 'pwd');
+    });
+
+    expect(result.current.user).toEqual(fakeUser);
+    expect(result.current.isAuthenticated).toBe(true);
+    /* L'utilisateur est persisté dans le localStorage */
+    expect(JSON.parse(localStorage.getItem('ds_user'))).toEqual(fakeUser);
+
+    act(() => {
+      result.current.logout();
+    });
+
+    expect(result.current.user).toBeNull();
+    expect(result.current.isAuthenticated).toBe(false);
+    expect(localStorage.getItem('ds_user')).toBeNull();
+    expect(clearSpy).toHaveBeenCalled();
+  });
+});

DataSentinel/src/__tests__/CookieBanner.test.jsx

@@ -0,0 +1,47 @@
+/* Tests du bandeau de consentement aux cookies (RGPD) */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import CookieBanner from '../components/common/CookieBanner';
+
+function renderBanner() {
+  return render(
+    <MemoryRouter>
+      <CookieBanner />
+    </MemoryRouter>
+  );
+}
+
+describe('CookieBanner', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('s\'affiche tant qu\'aucun consentement n\'est enregistré', () => {
+    renderBanner();
+    expect(screen.getByRole('dialog', { name: /Consentement aux cookies/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Tout accepter' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Refuser' })).toBeInTheDocument();
+  });
+
+  it('se masque et persiste le choix après "Tout accepter"', () => {
+    renderBanner();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Tout accepter' }));
+
+    /* Le bandeau disparaît */
+    expect(screen.queryByRole('dialog', { name: /Consentement aux cookies/ })).not.toBeInTheDocument();
+
+    /* La décision est persistée au format attendu */
+    const stored = JSON.parse(localStorage.getItem('ds_cookies_consent'));
+    expect(stored.choice).toBe('accept');
+    expect(stored.version).toBe(1);
+    expect(typeof stored.date).toBe('string');
+  });
+
+  it('ne s\'affiche pas si un consentement existe déjà', () => {
+    localStorage.setItem('ds_cookies_consent', JSON.stringify({ choice: 'refuse', date: '2026-01-01', version: 1 }));
+    renderBanner();
+    expect(screen.queryByRole('dialog', { name: /Consentement aux cookies/ })).not.toBeInTheDocument();
+  });
+});

DataSentinel/src/__tests__/Dashboard.test.jsx

@@ -0,0 +1,108 @@
+/* Filtres du dashboard.
+
+   Le comportement testé ici est la correction apportée aux menus déroulants :
+   ils étaient alimentés par les référentiels SERVICE / CATEGORIE complets,
+   dont certaines entrées (« Business Intelligence ») n'ont aucun monitoring
+   rattaché et menaient sur un écran vide. */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import Dashboard from '../pages/Dashboard/Dashboard';
+import * as api from '../services/api';
+
+/* Ce que renvoie GET /dashboard/filtres : uniquement les valeurs présentes
+   dans VUE_CONSO. Contrat porte 2 catégories, Fournisseur une seule. */
+const FILTRES = {
+  services: ['Contrat', 'Fournisseur'],
+  categories: ['Comptes fournisseurs', 'DOM-TOM', 'Tiers-payeurs'],
+  combinaisons: [
+    { service: 'Contrat', categorie: 'DOM-TOM' },
+    { service: 'Contrat', categorie: 'Tiers-payeurs' },
+    { service: 'Fournisseur', categorie: 'Comptes fournisseurs' },
+  ],
+};
+
+function renduDashboard() {
+  return render(<MemoryRouter><Dashboard /></MemoryRouter>);
+}
+
+describe('Dashboard — menus de filtre', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.spyOn(api, 'getDashboardFiltres').mockResolvedValue(FILTRES);
+    vi.spyOn(api, 'getDashboardSummary').mockResolvedValue({
+      total: 3, ok: 0, critical: 3, total_erreurs: 12,
+    });
+    vi.spyOn(api, 'getDashboard').mockResolvedValue([]);
+  });
+
+  it('ne propose que les services ayant au moins un monitoring', async () => {
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    const options = [...selectService.options].map(o => o.value);
+
+    expect(options).toContain('Contrat');
+    expect(options).toContain('Fournisseur');
+    /* Le cœur du correctif : ces entrées du référentiel ne doivent pas
+       apparaître puisqu'elles ramèneraient un dashboard vide. */
+    expect(options).not.toContain('Business Intelligence');
+    expect(options).not.toContain('Comptabilité');
+  });
+
+  it('restreint les catégories au service sélectionné', async () => {
+    const utilisateur = userEvent.setup();
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    const selectCategorie = screen.getByDisplayValue('Toutes les catégories');
+
+    /* Sans filtre de service : toutes les catégories utilisées */
+    expect([...selectCategorie.options].map(o => o.value)).toEqual(
+      expect.arrayContaining(['DOM-TOM', 'Tiers-payeurs', 'Comptes fournisseurs']),
+    );
+
+    await utilisateur.selectOptions(selectService, 'Fournisseur');
+
+    await waitFor(() => {
+      const restantes = [...selectCategorie.options].map(o => o.value).filter(Boolean);
+      expect(restantes).toEqual(['Comptes fournisseurs']);
+    });
+  });
+
+  it('réinitialise la catégorie devenue sans résultat après changement de service', async () => {
+    const utilisateur = userEvent.setup();
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    const selectCategorie = screen.getByDisplayValue('Toutes les catégories');
+
+    await utilisateur.selectOptions(selectCategorie, 'DOM-TOM');
+    expect(selectCategorie.value).toBe('DOM-TOM');
+
+    /* DOM-TOM n'existe pas pour Fournisseur : garder la sélection
+       produirait une combinaison vide. */
+    await utilisateur.selectOptions(selectService, 'Fournisseur');
+
+    await waitFor(() => expect(selectCategorie.value).toBe(''));
+  });
+
+  it('interroge l’API avec les filtres sélectionnés', async () => {
+    const utilisateur = userEvent.setup();
+    renduDashboard();
+
+    const selectService = await screen.findByDisplayValue('Tous les services');
+    await utilisateur.selectOptions(selectService, 'Contrat');
+
+    await waitFor(() => {
+      expect(api.getDashboard).toHaveBeenLastCalledWith('Contrat', '');
+    });
+  });
+
+  it('affiche les KPI renvoyés par l’API', async () => {
+    renduDashboard();
+    expect(await screen.findByText('12')).toBeInTheDocument();
+    expect(screen.getByText('Total erreurs')).toBeInTheDocument();
+  });
+});

DataSentinel/src/__tests__/Login.test.jsx

@@ -0,0 +1,44 @@
+/* Tests de la page de connexion : validation du captcha anti-bot */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Login from '../pages/Login/Login';
+import { AuthProvider } from '../context/AuthContext';
+import * as api from '../services/api';
+
+function renderLogin() {
+  return render(
+    <MemoryRouter>
+      <AuthProvider>
+        <Login />
+      </AuthProvider>
+    </MemoryRouter>
+  );
+}
+
+describe('Login - captcha', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('affiche une erreur et n\'appelle pas l\'API si le captcha est faux', async () => {
+    const loginSpy = vi.spyOn(api, 'login').mockResolvedValue({ username: 'x', role: 'Admin' });
+
+    renderLogin();
+
+    fireEvent.change(screen.getByLabelText('Identifiant'), { target: { value: 'alice' } });
+    fireEvent.change(screen.getByLabelText('Mot de passe'), { target: { value: 'pwd' } });
+    /* Réponse volontairement absurde, jamais égale à x + y (max 20) */
+    fireEvent.change(screen.getByLabelText(/combien font/i), { target: { value: '9999' } });
+
+    fireEvent.click(screen.getByRole('button', { name: /Se connecter/ }));
+
+    expect(await screen.findByText('Réponse au captcha incorrecte.')).toBeInTheDocument();
+    expect(loginSpy).not.toHaveBeenCalled();
+  });
+});

DataSentinel/src/__tests__/api.test.jsx

@@ -0,0 +1,82 @@
+/* Tests du service API : authentification et gestion du token JWT */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { login, getServices, getToken, setToken } from '../services/api';
+
+describe('api.login', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('stocke le token et envoie un corps urlencoded', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        access_token: 'jwt-abc-123',
+        token_type: 'bearer',
+        user: { username: 'alice', role: 'Admin' },
+      }),
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const user = await login('alice', 's3cret');
+
+    /* Le token est persisté */
+    expect(getToken()).toBe('jwt-abc-123');
+    /* L'utilisateur retourné provient de la réponse */
+    expect(user).toEqual({ username: 'alice', role: 'Admin' });
+
+    /* Vérifie l'URL, la méthode et l'en-tête de contenu */
+    const [url, options] = fetchMock.mock.calls[0];
+    expect(url).toMatch(/\/auth\/login$/);
+    expect(options.method).toBe('POST');
+    expect(options.headers['Content-Type']).toBe('application/x-www-form-urlencoded');
+
+    /* Le corps urlencoded contient bien username et password */
+    const params = new URLSearchParams(options.body);
+    expect(params.get('username')).toBe('alice');
+    expect(params.get('password')).toBe('s3cret');
+  });
+
+  it('lève "Identifiants invalides" sur une réponse 401', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: false,
+      status: 401,
+      text: async () => 'Unauthorized',
+    }));
+
+    await expect(login('alice', 'wrong')).rejects.toThrow('Identifiants invalides');
+    expect(getToken()).toBeNull();
+  });
+});
+
+describe('fetchApi (401)', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('purge le token lorsqu\'une requête renvoie 401', async () => {
+    setToken('expired-token');
+    expect(getToken()).toBe('expired-token');
+
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: false,
+      status: 401,
+      text: async () => 'Unauthorized',
+    }));
+
+    await expect(getServices()).rejects.toThrow();
+    /* Le token doit avoir été supprimé par handleUnauthorized */
+    expect(getToken()).toBeNull();
+  });
+});

DataSentinel/src/__tests__/dates.test.js

@@ -0,0 +1,50 @@
+/* Formatage des bornes de période de la page Historique.
+
+   Ces tests protègent une régression précise : la version d'origine utilisait
+   toISOString(), qui convertit en UTC. Depuis un fuseau en avance sur UTC
+   (Paris = UTC+1 en hiver), le 1er janvier local devient le 31 décembre de
+   l'année précédente, et la période affichée est décalée d'un jour. */
+import { describe, it, expect } from 'vitest';
+import { formatDateISO, periodeParDefaut } from '../utils/dates';
+
+describe('formatDateISO', () => {
+  it('formate une date en YYYY-MM-DD', () => {
+    expect(formatDateISO(new Date(2026, 7, 15))).toBe('2026-08-15');
+  });
+
+  it('complète le mois et le jour à deux chiffres', () => {
+    expect(formatDateISO(new Date(2026, 0, 5))).toBe('2026-01-05');
+  });
+
+  it('ne décale pas la date à minuit en heure locale', () => {
+    /* Le cas qui cassait : minuit local est la veille en UTC dès UTC+1. */
+    const premierJanvierMinuit = new Date(2026, 0, 1, 0, 0, 0);
+    expect(formatDateISO(premierJanvierMinuit)).toBe('2026-01-01');
+  });
+
+  it('ne décale pas non plus en fin de journée', () => {
+    /* Symétrique : 23h local bascule au lendemain pour les fuseaux négatifs. */
+    const finDeJournee = new Date(2026, 11, 31, 23, 30, 0);
+    expect(formatDateISO(finDeJournee)).toBe('2026-12-31');
+  });
+});
+
+describe('periodeParDefaut', () => {
+  it('démarre au 1er janvier de l’année de la date fournie', () => {
+    expect(periodeParDefaut(new Date(2026, 7, 15)).debut).toBe('2026-01-01');
+  });
+
+  it('se termine à la date fournie', () => {
+    expect(periodeParDefaut(new Date(2026, 7, 15)).fin).toBe('2026-08-15');
+  });
+
+  it('reste cohérente le 1er janvier (début = fin)', () => {
+    const periode = periodeParDefaut(new Date(2026, 0, 1));
+    expect(periode.debut).toBe('2026-01-01');
+    expect(periode.fin).toBe('2026-01-01');
+  });
+
+  it('suit le changement d’année', () => {
+    expect(periodeParDefaut(new Date(2027, 2, 9)).debut).toBe('2027-01-01');
+  });
+});

DataSentinel/src/__tests__/exportToCSV.test.js

@@ -0,0 +1,83 @@
+/* Export CSV, utilisé par les pages Vue consolidée, Contrat, Fournisseur,
+   Historique et Détail monitoring. Les données exportées viennent de Sage et
+   du CRM : elles contiennent des intitulés avec virgules et apostrophes, d'où
+   l'importance de l'échappement. */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { exportToCSV } from '../services/api';
+
+/* Capture le contenu du Blob passé à URL.createObjectURL, sans télécharger. */
+function capturerCSV(data, filename) {
+  let contenu = '';
+  let nomFichier = '';
+
+  vi.stubGlobal('Blob', class {
+    constructor(parties) { contenu = parties.join(''); }
+  });
+  vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:fake');
+  vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+  vi.spyOn(document, 'createElement').mockReturnValue({
+    set download(valeur) { nomFichier = valeur; },
+    get download() { return nomFichier; },
+    href: '',
+    click: () => {},
+  });
+
+  exportToCSV(data, filename);
+  return { contenu, nomFichier };
+}
+
+describe('exportToCSV', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('écrit une ligne d’en-têtes puis une ligne par enregistrement', () => {
+    const { contenu } = capturerCSV(
+      [{ nom: 'Tiers payeurs', erreurs: 5 }, { nom: 'DOM-TOM', erreurs: 3 }],
+      'export.csv',
+    );
+    const lignes = contenu.split('\n');
+    expect(lignes[0]).toBe('nom,erreurs');
+    expect(lignes[1]).toBe('Tiers payeurs,5');
+    expect(lignes[2]).toBe('DOM-TOM,3');
+  });
+
+  it('entoure de guillemets une valeur contenant une virgule', () => {
+    /* Sans échappement, la virgule créerait une colonne fantôme. */
+    const { contenu } = capturerCSV([{ intitule: 'XEFI Lyon, agence Est' }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe('"XEFI Lyon, agence Est"');
+  });
+
+  it('double les guillemets internes', () => {
+    const { contenu } = capturerCSV([{ intitule: 'Client "Test"' }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe('"Client ""Test"""');
+  });
+
+  it('protège une valeur contenant un saut de ligne', () => {
+    const { contenu } = capturerCSV([{ adresse: 'Ligne 1\nLigne 2' }], 'x.csv');
+    expect(contenu).toContain('"Ligne 1\nLigne 2"');
+  });
+
+  it('rend les valeurs nulles ou absentes par une cellule vide', () => {
+    const { contenu } = capturerCSV([{ a: null, b: undefined, c: 'ok' }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe(',,ok');
+  });
+
+  it('conserve le zéro au lieu de le traiter comme une valeur vide', () => {
+    /* 0 est falsy : un test de vérité naïf l’effacerait alors que
+       « 0 erreur » est justement l’information utile. */
+    const { contenu } = capturerCSV([{ nb_erreurs: 0 }], 'x.csv');
+    expect(contenu.split('\n')[1]).toBe('0');
+  });
+
+  it('utilise le nom de fichier demandé', () => {
+    const { nomFichier } = capturerCSV([{ a: 1 }], 'historique_2026.csv');
+    expect(nomFichier).toBe('historique_2026.csv');
+  });
+
+  it('n’exporte rien si la liste est vide', () => {
+    const creerElement = vi.spyOn(document, 'createElement');
+    exportToCSV([], 'vide.csv');
+    expect(creerElement).not.toHaveBeenCalled();
+  });
+});

DataSentinel/src/__tests__/statutMonitoring.test.js

@@ -0,0 +1,33 @@
+/* Règle métier de classement d'un monitoring selon son nombre d'erreurs.
+   Elle était dupliquée dans trois composants avant d'être centralisée : ces
+   tests fixent le contrat pour que les trois écrans restent cohérents. */
+import { describe, it, expect } from 'vitest';
+import { getStatutMonitoring, SEUIL_ATTENTION } from '../utils/statutMonitoring';
+
+describe('getStatutMonitoring', () => {
+  it('classe OK un monitoring sans erreur', () => {
+    expect(getStatutMonitoring(0).label).toBe('OK');
+    expect(getStatutMonitoring(0).variant).toBe('ok');
+  });
+
+  it('classe Attention en dessous du seuil', () => {
+    expect(getStatutMonitoring(1).label).toBe('Attention');
+    expect(getStatutMonitoring(SEUIL_ATTENTION - 1).label).toBe('Attention');
+  });
+
+  it('bascule en Critique à partir du seuil, pas avant', () => {
+    /* La borne est le point où une erreur de type < / <= se verrait. */
+    expect(getStatutMonitoring(SEUIL_ATTENTION - 1).label).toBe('Attention');
+    expect(getStatutMonitoring(SEUIL_ATTENTION).label).toBe('Critique');
+    expect(getStatutMonitoring(SEUIL_ATTENTION + 1).label).toBe('Critique');
+  });
+
+  it('fournit toujours un libellé, une variante et une couleur', () => {
+    for (const nb of [0, 5, 50]) {
+      const statut = getStatutMonitoring(nb);
+      expect(statut.label).toBeTruthy();
+      expect(statut.variant).toBeTruthy();
+      expect(statut.color).toMatch(/^var\(--/);
+    }
+  });
+});

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';
 
@@ -44,8 +44,8 @@ export default function Header({ onToggleSidebar, sidebarOpen }) {
           <Bell size={18} color="var(--color-white)" aria-hidden="true" />
         </button>
         {user && (
-          <span className={styles.username} aria-label={`Connecté en tant que ${user.nom}`}>
+          <span className={styles.username} aria-label={`Connecté en tant que ${user.username}`}>
-            {user.nom}
+            {user.username}
           </span>
         )}
         <button

DataSentinel/src/components/Layout/Layout.jsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Header from './Header';
 import Sidebar from './Sidebar';
+import CookieBanner from '../common/CookieBanner';
 import { Outlet } from 'react-router-dom';
 import styles from './Layout.module.css';
 
@@ -19,6 +20,7 @@ export default function Layout() {
       <main id="main-content" className={styles.main} tabIndex="-1">
         <Outlet />
       </main>
+      <CookieBanner />
     </div>
   );
 }

DataSentinel/src/components/Layout/Sidebar.jsx

@@ -11,7 +11,9 @@ import {
   Book,
   Shield,
   FileText,
+  ScrollText,
 } from 'lucide-react';
+import { useAuth } from '../../context/useAuth';
 import styles from './Sidebar.module.css';
 
 /* Un lien de navigation avec icône */
@@ -31,6 +33,9 @@ function NavItem({ to, icon: Icon, label }) {
 }
 
 export default function Sidebar({ isOpen, onClose }) {
+  const { user } = useAuth();
+  const isAdmin = user?.role === 'Admin';
+
   return (
     <>
       {/* Overlay mobile pour fermer la sidebar */}
@@ -58,15 +63,18 @@ export default function Sidebar({ isOpen, onClose }) {
             <NavItem to="/historique" icon={Clock} label="Historique" />
           </div>
 
-          <div className={styles.separator} role="separator" />
+          {/* Section administration : réservée aux administrateurs */}
-
+          {isAdmin && (
-          {/* Section administration */}
+            <>
-          <div className={styles.sectionLabel} aria-hidden="true">ADMIN</div>
+              <div className={styles.separator} role="separator" />
-          <div className={styles.section} role="group" aria-label="Administration">
+              <div className={styles.sectionLabel} aria-hidden="true">ADMIN</div>
-            <NavItem to="/admin" icon={Settings} label="Nomenclature" />
+              <div className={styles.section} role="group" aria-label="Administration">
-            <NavItem to="/utilisateurs" icon={Users} label="Utilisateurs" />
+                <NavItem to="/admin" icon={Settings} label="Nomenclature" />
-
+                <NavItem to="/utilisateurs" icon={Users} label="Utilisateurs" />
-          </div>
+                <NavItem to="/journal" icon={ScrollText} label="Journal d'audit" />
+              </div>
+            </>
+          )}
         </nav>
 
         {/* Liens de pied de sidebar */}

DataSentinel/src/components/common/CookieBanner.jsx

@@ -0,0 +1,53 @@
+/* Bandeau de consentement aux cookies (RGPD) */
+
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './CookieBanner.module.css';
+
+const CONSENT_KEY = 'ds_cookies_consent';
+const CONSENT_VERSION = 1;
+
+export default function CookieBanner() {
+  /* Affiché tant qu'aucune décision n'a été enregistrée */
+  const [visible, setVisible] = useState(() => localStorage.getItem(CONSENT_KEY) === null);
+
+  if (!visible) {
+    return null;
+  }
+
+  /* Enregistre la décision de l'utilisateur (accept / refuse) */
+  function enregistrerChoix(choice) {
+    const decision = { choice, date: new Date().toISOString(), version: CONSENT_VERSION };
+    localStorage.setItem(CONSENT_KEY, JSON.stringify(decision));
+    setVisible(false);
+  }
+
+  return (
+    <div className={styles.banner} role="dialog" aria-label="Consentement aux cookies">
+      <div className={styles.content}>
+        <p className={styles.text}>
+          Nous utilisons des cookies pour assurer le bon fonctionnement de la plateforme.
+          Vous pouvez accepter ou refuser leur utilisation. Pour en savoir plus, consultez nos{' '}
+          <Link to="/mentions-legales" className={styles.link}>mentions légales</Link> et nos{' '}
+          <Link to="/cgu" className={styles.link}>CGU</Link>.
+        </p>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.btnRefuse}
+            onClick={() => enregistrerChoix('refuse')}
+          >
+            Refuser
+          </button>
+          <button
+            type="button"
+            className={styles.btnAccept}
+            onClick={() => enregistrerChoix('accept')}
+          >
+            Tout accepter
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+/* Bandeau de consentement aux cookies (RGPD) */
+
+.banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--color-white);
+  border-top: 3px solid var(--color-primary);
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
+  padding: 16px 24px;
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.text {
+  font-size: 13px;
+  color: var(--color-text);
+  margin: 0;
+  flex: 1;
+  min-width: 240px;
+}
+
+.link {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.btnAccept {
+  padding: 9px 18px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.btnAccept:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.btnRefuse {
+  padding: 9px 18px;
+  background-color: var(--color-white);
+  color: var(--color-text);
+  border: 1px solid var(--color-gray-border);
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.btnRefuse:hover {
+  background-color: var(--color-danger-bg);
+}

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,32 +1,31 @@
 /* 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';
-const AuthContext = createContext(null);
+import { USER_KEY } from '../services/api';
-
+import { AuthContext } from './authContextObject';
-/* Utilisateur fictif stocké après connexion réussie (V1, pas de vrai auth) */
-const USER_FICTIF = { nom: 'Coyaud', prenom: 'Anthony', role: 'Admin' };
-const STORAGE_KEY = 'ds_user';
 
 /* Fournisseur du contexte d'authentification */
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(() => {
-    /* Restauration de la session depuis sessionStorage */
+    /* Restauration de la session depuis le localStorage au montage */
-    const stored = sessionStorage.getItem(STORAGE_KEY);
+    const stored = localStorage.getItem(USER_KEY);
     return stored ? JSON.parse(stored) : null;
   });
 
-  /* Connexion : stocke l'utilisateur fictif dans le state et sessionStorage, retourne true */
+  /* Connexion : appelle l'API, stocke le token + l'utilisateur retourné */
-  function login() {
+  async function login(username, password) {
-    setUser(USER_FICTIF);
+    const connectedUser = await api.login(username, password);
-    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(USER_FICTIF));
+    setUser(connectedUser);
-    return true;
+    localStorage.setItem(USER_KEY, JSON.stringify(connectedUser));
+    return connectedUser;
   }
 
-  /* Déconnexion : vide le state et sessionStorage */
+  /* Déconnexion : vide le token, le state et le localStorage */
   function logout() {
+    api.clearToken();
     setUser(null);
-    sessionStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(USER_KEY);
   }
 
   /* Booléen pratique pour savoir si l'utilisateur est connecté */
@@ -39,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,230 +1,187 @@
 // 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 }) {
+  const [monitorings, services, categories, contacts] = await Promise.all([
-  if (!isOpen) return null;
+    getMonitorings(),
-
+    getServices(),
-  return (
+    getCategories(),
-    <div className={styles.modalOverlay} onClick={onClose}>
+    getContacts(),
-      <div className={styles.modal} onClick={e => e.stopPropagation()}>
+  ]);
-        <div className={styles.modalHeader}>
+  return {
-          <h2>{title}</h2>
+    monitorings: Array.isArray(monitorings) ? monitorings : [],
-          <button className={styles.closeBtn} onClick={onClose}>×</button>
+    services: Array.isArray(services) ? services : [],
-        </div>
+    categories: Array.isArray(categories) ? categories : [],
-        <div className={styles.modalBody}>
+    contacts: Array.isArray(contacts) ? contacts : [],
-          {children}
+  };
-        </div>
-      </div>
-    </div>
-  );
 }
 
 export default function Admin() {
-  const [activeTab, setActiveTab] = useState('monitorings');
+  const [ongletActif, setOngletActif] = useState(REFERENTIELS[0].key);
-  const [data, setData] = useState({});
+  const [donnees, setDonnees] = useState({});
   const [loading, setLoading] = useState(true);
   const [erreur, setErreur] = useState('');
-  const [modalOpen, setModalOpen] = useState(false);
+  const [modaleOuverte, setModaleOuverte] = useState(false);
-  const [editingItem, setEditingItem] = useState(null);
+  const [elementEnEdition, setElementEnEdition] = useState(null);
 
-  useEffect(() => {
+  const recharger = useCallback(async () => {
-    async function loadData() {
+    setErreur('');
-      setLoading(true);
+    try {
-      setErreur('');
+      setDonnees(await chargerReferentiels());
-      try {
+    } catch (e) {
-        const [monitorings, services, categories, contacts] = await Promise.all([
+      setErreur(e.message || 'Erreur lors du chargement des données administratives.');
-          getMonitorings(),
-          getServices(),
-          getCategories(),
-          getContacts()
-        ]);
-        setData({
-          monitorings: Array.isArray(monitorings) ? monitorings : [],
-          services: Array.isArray(services) ? services : [],
-          categories: Array.isArray(categories) ? categories : [],
-          contacts: Array.isArray(contacts) ? contacts : []
-        });
-      } 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,87 @@
+/* Les appels API sont référencés via l'espace de noms et résolus au moment de
+   l'appel, et non capturés à l'import : la configuration ne fige donc pas une
+   implémentation, ce qui la découple du module d'API. */
+import * as api 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: body => api.createMonitoring(body),
+    modifier: (id, body) => api.updateMonitoring(id, body),
+    supprimer: id => api.desactiverMonitoring(id),
+  },
+  {
+    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: body => api.createService(body),
+    modifier: (id, body) => api.updateService(id, body),
+    supprimer: id => api.deleteService(id),
+  },
+  {
+    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: body => api.createCategorie(body),
+    modifier: (id, body) => api.updateCategorie(id, body),
+    supprimer: id => api.deleteCategorie(id),
+  },
+  {
+    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: body => api.createContact(body),
+    modifier: (id, body) => api.updateContact(id, body),
+    supprimer: id => api.deleteContact(id),
+  },
+];
+
+/* 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

@@ -1,40 +1,35 @@
 /* Page principale du dashboard : KPI cards + grille de monitorings */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { RefreshCw } from 'lucide-react';
-import { getDashboard, getDashboardSummary, getServices, getCategories } from '../../services/api';
+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([]);
   const [services, setServices] = useState([]);
-  const [categories, setCategories] = useState([]);
+  const [combinaisons, setCombinaisons] = useState([]);
   const [filtreService, setFiltreService] = useState('');
   const [filtreCategorie, setFiltreCategorie] = useState('');
   const [loading, setLoading] = useState(true);
   const [erreur, setErreur] = useState('');
+  const [rafraichissement, setRafraichissement] = useState(0);
 
-  /* Chargement initial des filtres */
+  /* Chargement initial des filtres.
+     On n'utilise pas les référentiels SERVICE / CATEGORIE complets : ils
+     contiennent des entrées sans aucun monitoring rattaché (ex. « Business
+     Intelligence »), qui mèneraient sur un dashboard vide. */
   useEffect(() => {
     async function loadFiltres() {
       try {
-        const [svcs, cats] = await Promise.all([getServices(), getCategories()]);
+        const filtres = await getDashboardFiltres();
-        setServices(svcs);
+        setServices(filtres.services);
-        setCategories(cats);
+        setCombinaisons(filtres.combinaisons);
       } catch {
         /* Non bloquant, les filtres restent vides */
       }
@@ -42,33 +37,73 @@ export default function Dashboard() {
     loadFiltres();
   }, []);
 
-  /* Chargement des données dashboard */
+  /* Catégories proposées : restreintes au service sélectionné, le cas échéant */
-  const loadData = useCallback(async () => {
+  const categoriesDisponibles = useCallback(service => {
-    setLoading(true);
+    const pertinentes = service
-    setErreur('');
+      ? combinaisons.filter(c => c.service === service)
-    try {
+      : combinaisons;
-      const [sum, data] = await Promise.all([
+    return [...new Set(pertinentes.map(c => c.categorie))].sort();
-        getDashboardSummary(),
+  }, [combinaisons]);
-        getDashboard(filtreService, filtreCategorie),
-      ]);
-      setSummary(sum);
-      setMonitorings(Array.isArray(data) ? data : []);
-    } catch (e) {
-      setErreur(e.message || 'Erreur lors du chargement du dashboard.');
-    } finally {
-      setLoading(false);
-    }
-  }, [filtreService, filtreCategorie]);
 
+  const categories = useMemo(
+    () => categoriesDisponibles(filtreService),
+    [categoriesDisponibles, filtreService],
+  );
+
+  /* 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('');
+    }
+  }
+
+  function handleCategorieChange(categorie) {
+    setLoading(true);
+    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(() => {
-    loadData();
+    let annule = false;
-  }, [loadData]);
+
+    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) {
+        if (!annule) setErreur(e.message || 'Erreur lors du chargement du dashboard.');
+      } finally {
+        if (!annule) setLoading(false);
+      }
+    }
+
+    charger();
+    return () => { annule = true; };
+  }, [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>
@@ -105,21 +140,21 @@ export default function Dashboard() {
         <select
           className={styles.select}
           value={filtreService}
-          onChange={e => setFiltreService(e.target.value)}
+          onChange={e => handleServiceChange(e.target.value)}
         >
           <option value="">Tous les services</option>
           {services.map(s => (
-            <option key={s.id_service} value={s.nom_service}>{s.nom_service}</option>
+            <option key={s} value={s}>{s}</option>
           ))}
         </select>
         <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 => (
-            <option key={c.id_categorie} value={c.intitule_categorie}>{c.intitule_categorie}</option>
+            <option key={c} value={c}>{c}</option>
           ))}
         </select>
       </div>
@@ -128,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/Historique/Historique.jsx

@@ -2,33 +2,56 @@
 // Page Historique : filtres + graphique ligne + tableau résumé
 import { useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, ComposedChart } from 'recharts';
+import { Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, ComposedChart } from 'recharts';
 import { getMonitorings, getHistorique, getHistoriqueEvolution, getEvolutionGlobal, exportToCSV } 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 { periodeParDefaut } from '../../utils/dates';
 import styles from './Historique.module.css';
 
+/* Récupère le tableau d'historique et la série du graphique pour les filtres
+   donnés. Sans monitoring sélectionné, on prend la courbe globale.
+   Fonction pure : elle ne touche à aucun état, ce qui permet de l'appeler
+   aussi bien depuis le bouton « Afficher » que depuis l'effet de montage. */
+async function recupererHistorique(monitoring, debut, fin) {
+  const [histResult, evolResult] = monitoring
+    ? await Promise.all([
+        getHistorique(monitoring, debut, fin),
+        getHistoriqueEvolution(monitoring, debut, fin),
+      ])
+    : await Promise.all([
+        getHistorique(undefined, debut, fin),
+        getEvolutionGlobal(debut, fin),
+      ]);
+
+  return {
+    hist: Array.isArray(histResult) ? histResult : [],
+    evol: Array.isArray(evolResult) ? evolResult : [],
+  };
+}
+
 export default function Historique() {
   const [searchParams] = useSearchParams();
+
+  /* Figé au montage : sert à la fois de valeur initiale des filtres et de
+     paramètres du premier chargement, sans dépendance instable. */
+  const [valeursInitiales] = useState(() => ({
+    monitoring: searchParams.get('id') || '',
+    ...periodeParDefaut(),
+  }));
+
   const [monitorings, setMonitorings] = useState([]);
-  const [selectedMonitoring, setSelectedMonitoring] = useState(searchParams.get('id') || '');
+  const [selectedMonitoring, setSelectedMonitoring] = useState(valeursInitiales.monitoring);
-  const [dateDebut, setDateDebut] = useState('');
+  const [dateDebut, setDateDebut] = useState(valeursInitiales.debut);
-  const [dateFin, setDateFin] = useState('');
+  const [dateFin, setDateFin] = useState(valeursInitiales.fin);
   const [historiqueData, setHistoriqueData] = useState([]);
   const [evolutionData, setEvolutionData] = useState([]);
-  const [loading, setLoading] = useState(false);
+  /* Un chargement est lancé dès le montage : la page démarre donc en attente. */
+  const [loading, setLoading] = useState(true);
   const [erreur, setErreur] = useState('');
 
-  /* Set default dates to last 5 days */
-  useEffect(() => {
-    const today = new Date();
-    const fiveDaysAgo = new Date(today);
-    fiveDaysAgo.setDate(today.getDate() - 5);
-    setDateDebut(fiveDaysAgo.toISOString().split('T')[0]);
-    setDateFin(today.toISOString().split('T')[0]);
-  }, []);
   useEffect(() => {
     async function loadMonitorings() {
       try {
@@ -41,6 +64,31 @@ export default function Historique() {
     loadMonitorings();
   }, []);
 
+  /* Premier affichage : on charge la période par défaut, pour que la page ne
+     s'ouvre pas sur un écran vide en attente d'un clic. Le drapeau `annule`
+     évite d'écrire dans un composant déjà démonté si l'utilisateur quitte la
+     page pendant la requête. */
+  useEffect(() => {
+    let annule = false;
+
+    async function chargerAuMontage() {
+      const { monitoring, debut, fin } = valeursInitiales;
+      try {
+        const { hist, evol } = await recupererHistorique(monitoring, debut, fin);
+        if (annule) return;
+        setHistoriqueData(hist);
+        setEvolutionData(evol);
+      } catch (e) {
+        if (!annule) setErreur(e.message || 'Erreur lors du chargement de l\'historique.');
+      } finally {
+        if (!annule) setLoading(false);
+      }
+    }
+
+    chargerAuMontage();
+    return () => { annule = true; };
+  }, [valeursInitiales]);
+
   async function handleAfficher() {
     if (!dateDebut || !dateFin) {
       setErreur('Veuillez sélectionner des dates.');
@@ -50,25 +98,7 @@ export default function Historique() {
     setLoading(true);
     setErreur('');
     try {
-      let hist = [];
+      const { hist, evol } = await recupererHistorique(selectedMonitoring, dateDebut, dateFin);
-      let evol = [];
-
-      if (selectedMonitoring) {
-        const [histResult, evolResult] = await Promise.all([
-          getHistorique(selectedMonitoring, dateDebut, dateFin),
-          getHistoriqueEvolution(selectedMonitoring, dateDebut, dateFin)
-        ]);
-        hist = Array.isArray(histResult) ? histResult : [];
-        evol = Array.isArray(evolResult) ? evolResult : [];
-      } else {
-        const [histResult, evolResult] = await Promise.all([
-          getHistorique(undefined, dateDebut, dateFin),
-          getEvolutionGlobal(dateDebut, dateFin)
-        ]);
-        hist = Array.isArray(histResult) ? histResult : [];
-        evol = Array.isArray(evolResult) ? evolResult : [];
-      }
-
       setHistoriqueData(hist);
       setEvolutionData(evol);
     } catch (e) {
@@ -189,9 +219,9 @@ export default function Historique() {
             emptyMessage="Aucune donnée historique."
           />
         </>
-      ) : selectedMonitoring && dateDebut && dateFin && !loading ? (
+      ) : (
         <p className={styles.empty}>Aucune donnée trouvée pour cette période.</p>
-      ) : null}
+      )}
     </div>
   );
 }

DataSentinel/src/pages/Journal/Journal.jsx

@@ -30,7 +30,7 @@ export default function Journal() {
 
   const columns = [
     { key: 'date_action', label: 'Date' },
-    { key: 'utilisateur', label: 'Utilisateur' },
+    { key: 'username', label: 'Utilisateur' },
     { key: 'action', label: 'Action' },
     { key: 'detail', label: 'Détail' },
     { key: 'ip', label: 'Adresse IP' },

DataSentinel/src/pages/Login/Login.jsx

@@ -1,14 +1,23 @@
-/* Page de connexion : formulaire + SSO Windows */
+/* Page de connexion : formulaire avec authentification JWT + captcha anti-bot */
 
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../../context/AuthContext';
+import { useAuth } from '../../context/useAuth';
-import { getHealth } from '../../services/api';
 import styles from './Login.module.css';
 
+/* Génère deux entiers aléatoires pour le captcha additif */
+function genererCaptcha() {
+  return {
+    x: Math.floor(Math.random() * 10) + 1,
+    y: Math.floor(Math.random() * 10) + 1,
+  };
+}
+
 export default function Login() {
   const [identifiant, setIdentifiant] = useState('');
   const [motDePasse, setMotDePasse] = useState('');
+  const [captcha, setCaptcha] = useState(() => genererCaptcha());
+  const [reponseCaptcha, setReponseCaptcha] = useState('');
   const [loading, setLoading] = useState(false);
   const [erreur, setErreur] = useState('');
 
@@ -18,25 +27,29 @@ export default function Login() {
   async function handleSubmit(e) {
     e.preventDefault();
     setErreur('');
-    setLoading(true);
 
+    /* Vérification anti-bot du captcha avant tout appel réseau */
+    if (parseInt(reponseCaptcha, 10) !== captcha.x + captcha.y) {
+      setErreur('Réponse au captcha incorrecte.');
+      setCaptcha(genererCaptcha());
+      setReponseCaptcha('');
+      return;
+    }
+
+    setLoading(true);
     try {
-      /* Vérification de la disponibilité de l'API avant connexion */
+      await login(identifiant, motDePasse);
-      await getHealth();
-      login({ nom: identifiant || 'Utilisateur', role: 'user', token: 'session' });
       navigate('/dashboard');
-    } catch {
+    } catch (err) {
-      setErreur('Impossible de contacter le serveur. Vérifiez que l\'API est démarrée sur le port 8000.');
+      /* Message générique en cas d'identifiants invalides ou d'erreur serveur */
+      setErreur(err.message === 'Identifiants invalides' ? 'Identifiants invalides' : (err.message || 'Identifiants invalides'));
+      setCaptcha(genererCaptcha());
+      setReponseCaptcha('');
     } finally {
       setLoading(false);
     }
   }
 
-  function handleSso() {
-    /* Connexion SSO Windows : même vérification API */
-    handleSubmit({ preventDefault: () => {} });
-  }
-
   return (
     <div className={styles.page}>
       <div className={styles.card}>
@@ -73,6 +86,21 @@ export default function Login() {
             />
           </div>
 
+          <div className={styles.field}>
+            <label className={styles.label} htmlFor="captcha">
+              Vérification : combien font {captcha.x} + {captcha.y} ?
+            </label>
+            <input
+              id="captcha"
+              type="number"
+              className={styles.input}
+              value={reponseCaptcha}
+              onChange={e => setReponseCaptcha(e.target.value)}
+              placeholder="Votre réponse"
+              autoComplete="off"
+            />
+          </div>
+
           {erreur && <p className={styles.erreur}>{erreur}</p>}
 
           <button type="submit" className={styles.btnPrimary} disabled={loading}>
@@ -80,14 +108,6 @@ export default function Login() {
           </button>
         </form>
 
-        <div className={styles.divider}>
-          <span>ou</span>
-        </div>
-
-        <button type="button" className={styles.btnSecondary} onClick={handleSso} disabled={loading}>
-          Connexion Windows SSO
-        </button>
-
         <div className={styles.links}>
           <a href="#" className={styles.forgotLink}>Mot de passe oublié ?</a>
         </div>

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

@@ -1,76 +1,289 @@
 // src/pages/Users/Users.jsx
-// Page Utilisateurs : gestion des utilisateurs (simulation)
+// Page Utilisateurs : gestion réelle des utilisateurs via l'API admin
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
-import { Plus, Edit, Trash2 } from 'lucide-react';
+import { Plus, Edit, Trash2, KeyRound } from 'lucide-react';
 import DataTable from '../../components/common/DataTable';
 import Button from '../../components/common/Button';
+import LoadingSpinner from '../../components/common/LoadingSpinner';
+import ErrorMessage from '../../components/common/ErrorMessage';
+import {
+  getUsers,
+  createUser,
+  updateUser,
+  deleteUser,
+  resetUserPassword,
+} from '../../services/api';
 import styles from './Users.module.css';
 
-/* Données simulées pour les utilisateurs */
+/* Rôles disponibles côté backend */
-const mockUsers = [
+const ROLES = ['Admin', 'Superviseur', 'Consultant'];
-  { id: 1, nom: 'Alice Dupont', email: 'alice@xefi.fr', role: 'Admin', actif: true },
-  { id: 2, nom: 'Bob Martin', email: 'bob@xefi.fr', role: 'Utilisateur', actif: true },
-  { id: 3, nom: 'Charlie Durand', email: 'charlie@xefi.fr', role: 'Utilisateur', actif: false }
-];
 
 export default function Users() {
-  const [users, setUsers] = useState(mockUsers);
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [erreur, setErreur] = useState('');
 
-  function handleAdd() {
+  /* Modale active : 'create' | 'edit' | 'reset' | null */
-    console.log('Ajouter utilisateur');
+  const [modal, setModal] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [form, setForm] = useState({});
+  const [formError, setFormError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const charger = useCallback(async () => {
+    setLoading(true);
+    setErreur('');
+    try {
+      const data = await getUsers();
+      setUsers(Array.isArray(data) ? data : []);
+    } catch (e) {
+      setErreur(e.message || 'Erreur lors du chargement des utilisateurs.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* 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(() => {
+    let annule = false;
+
+    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() {
+    setSelected(null);
+    setForm({ username: '', email: '', password: '', role: 'Consultant' });
+    setFormError('');
+    setModal('create');
   }
 
-  function handleEdit(user) {
+  function ouvrirEdition(user) {
-    console.log('Modifier utilisateur', user);
+    setSelected(user);
+    setForm({ email: user.email ?? '', role: user.role ?? 'Consultant', actif: !!user.actif });
+    setFormError('');
+    setModal('edit');
   }
 
-  function handleDelete(user) {
+  function ouvrirReset(user) {
-    setUsers(prev => prev.map(u => u.id === user.id ? { ...u, actif: false } : u));
+    setSelected(user);
+    setForm({ password: '' });
+    setFormError('');
+    setModal('reset');
+  }
+
+  function fermerModale() {
+    setModal(null);
+    setSelected(null);
+    setForm({});
+    setFormError('');
+  }
+
+  /* Suppression (soft delete) avec confirmation */
+  async function handleDelete(user) {
+    if (!window.confirm(`Désactiver l'utilisateur "${user.username}" ?`)) {
+      return;
+    }
+    try {
+      await deleteUser(user.id_user);
+      await charger();
+    } catch (e) {
+      setErreur(e.message || 'Erreur lors de la suppression.');
+    }
+  }
+
+  /* Soumission de la modale courante */
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setFormError('');
+    setSubmitting(true);
+    try {
+      if (modal === 'create') {
+        await createUser({
+          username: form.username,
+          email: form.email,
+          password: form.password,
+          role: form.role,
+        });
+      } else if (modal === 'edit') {
+        await updateUser(selected.id_user, {
+          email: form.email,
+          role: form.role,
+          actif: form.actif,
+        });
+      } else if (modal === 'reset') {
+        await resetUserPassword(selected.id_user, form.password);
+      }
+      fermerModale();
+      await charger();
+    } catch (e) {
+      setFormError(e.message || 'Une erreur est survenue.');
+    } finally {
+      setSubmitting(false);
+    }
   }
 
   const columns = [
-    { key: 'nom', label: 'Nom' },
+    { key: 'username', label: 'Identifiant' },
     { key: 'email', label: 'Email' },
     { key: 'role', label: 'Rôle' },
     {
       key: 'actif',
       label: 'Statut',
-      render: (val) => val ? 'Actif' : 'Inactif'
+      render: (val) => (val ? 'Actif' : 'Inactif'),
     },
     {
       key: 'actions',
       label: 'Actions',
       render: (val, row) => (
         <div className={styles.actions}>
-          <button className={styles.actionBtn} onClick={() => handleEdit(row)}>
+          <button className={styles.actionBtn} onClick={() => ouvrirEdition(row)}>
             <Edit size={14} />
             Modifier
           </button>
+          <button className={styles.actionBtn} onClick={() => ouvrirReset(row)}>
+            <KeyRound size={14} />
+            Mot de passe
+          </button>
           <button className={styles.actionBtn} onClick={() => handleDelete(row)}>
             <Trash2 size={14} />
             Désactiver
           </button>
         </div>
-      )
+      ),
-    }
+    },
   ];
 
   return (
     <div className={styles.page}>
       <div className={styles.header}>
         <h1 className={styles.title}>Utilisateurs</h1>
-        <Button variant="primary" onClick={handleAdd}>
+        <Button variant="primary" onClick={ouvrirCreation}>
           <Plus size={14} />
           Ajouter
         </Button>
       </div>
 
-      <DataTable
+      {loading ? (
-        columns={columns}
+        <LoadingSpinner message="Chargement des utilisateurs..." />
-        data={users}
+      ) : erreur ? (
-        pageSize={50}
+        <ErrorMessage message={erreur} onRetry={charger} />
-        emptyMessage="Aucun utilisateur trouvé."
+      ) : (
-      />
+        <DataTable
+          columns={columns}
+          data={users.map(u => ({ ...u, id: u.id_user }))}
+          pageSize={50}
+          emptyMessage="Aucun utilisateur trouvé."
+        />
+      )}
+
+      {modal && (
+        <div className={styles.overlay} role="dialog" aria-modal="true" onClick={fermerModale}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <h2 className={styles.modalTitle}>
+              {modal === 'create' && 'Nouvel utilisateur'}
+              {modal === 'edit' && `Modifier ${selected?.username}`}
+              {modal === 'reset' && `Réinitialiser le mot de passe de ${selected?.username}`}
+            </h2>
+
+            <form className={styles.form} onSubmit={handleSubmit}>
+              {modal === 'create' && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="username">Identifiant</label>
+                  <input
+                    id="username"
+                    type="text"
+                    className={styles.input}
+                    value={form.username}
+                    onChange={e => setForm(f => ({ ...f, username: e.target.value }))}
+                    required
+                  />
+                </div>
+              )}
+
+              {(modal === 'create' || modal === 'edit') && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="email">Email</label>
+                  <input
+                    id="email"
+                    type="email"
+                    className={styles.input}
+                    value={form.email}
+                    onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
+                    required
+                  />
+                </div>
+              )}
+
+              {(modal === 'create' || modal === 'reset') && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="password">Mot de passe</label>
+                  <input
+                    id="password"
+                    type="password"
+                    className={styles.input}
+                    value={form.password}
+                    onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
+                    required
+                  />
+                </div>
+              )}
+
+              {(modal === 'create' || modal === 'edit') && (
+                <div className={styles.field}>
+                  <label className={styles.label} htmlFor="role">Rôle</label>
+                  <select
+                    id="role"
+                    className={styles.input}
+                    value={form.role}
+                    onChange={e => setForm(f => ({ ...f, role: e.target.value }))}
+                  >
+                    {ROLES.map(r => (
+                      <option key={r} value={r}>{r}</option>
+                    ))}
+                  </select>
+                </div>
+              )}
+
+              {modal === 'edit' && (
+                <div className={styles.checkboxField}>
+                  <input
+                    id="actif"
+                    type="checkbox"
+                    checked={form.actif}
+                    onChange={e => setForm(f => ({ ...f, actif: e.target.checked }))}
+                  />
+                  <label htmlFor="actif">Compte actif</label>
+                </div>
+              )}
+
+              {formError && <p className={styles.formError}>{formError}</p>}
+
+              <div className={styles.modalActions}>
+                <Button variant="neutral" type="button" onClick={fermerModale} disabled={submitting}>
+                  Annuler
+                </Button>
+                <Button variant="primary" type="submit" disabled={submitting}>
+                  {submitting ? 'Enregistrement...' : 'Enregistrer'}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </div>
   );
-}
+}

DataSentinel/src/pages/Users/Users.module.css

@@ -40,4 +40,90 @@
 
 .actionBtn:hover {
   color: var(--color-primary);
+}
+
+/* Modale de création / édition / réinitialisation */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.modal {
+  background-color: var(--color-white);
+  width: 100%;
+  max-width: 440px;
+  border-radius: var(--radius);
+  border-top: 4px solid var(--color-primary);
+  padding: 28px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.modalTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0 0 20px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.input {
+  padding: 10px 12px;
+  border: 1px solid var(--color-gray-border);
+  border-radius: var(--radius);
+  font-size: 14px;
+  color: var(--color-text);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.input:focus {
+  border-color: var(--color-primary);
+}
+
+.checkboxField {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.formError {
+  font-size: 13px;
+  color: var(--color-primary);
+  background-color: var(--color-danger-bg);
+  border-left: 3px solid var(--color-primary);
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  margin: 0;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 8px;
 }

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,7 +3,46 @@
 /* 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';
 
-/* Fonction utilitaire pour les requêtes fetch avec gestion d'erreur */
+/* 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';
+export const USER_KEY = 'ds_user';
+
+/* Helpers de gestion du token JWT dans le localStorage */
+export function getToken() {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token) {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function clearToken() {
+  localStorage.removeItem(TOKEN_KEY);
+}
+
+/* Construit les en-têtes d'authentification si un token est présent */
+function authHeaders(extra = {}) {
+  const token = getToken();
+  const headers = { ...extra };
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+  return headers;
+}
+
+/* Gestion d'une réponse 401 : purge de la session et redirection vers /login */
+function handleUnauthorized() {
+  clearToken();
+  localStorage.removeItem(USER_KEY);
+  /* Évite une boucle de redirection si on est déjà sur la page de connexion */
+  if (window.location.pathname !== '/login') {
+    window.location.href = '/login';
+  }
+}
+
+/* Fonction utilitaire pour les requêtes fetch (GET) avec gestion d'erreur et auth */
 async function fetchApi(path, params = {}) {
   const url = new URL(`${BASE_URL}${path}`);
   Object.entries(params).forEach(([key, value]) => {
@@ -13,7 +52,11 @@ async function fetchApi(path, params = {}) {
   });
 
   try {
-    const response = await fetch(url.toString());
+    const response = await fetch(url.toString(), { headers: authHeaders() });
+    if (response.status === 401) {
+      handleUnauthorized();
+      throw new Error('Session expirée, veuillez vous reconnecter.');
+    }
     if (!response.ok) {
       const errorText = await response.text();
       console.error(`Erreur API [${response.status}] ${path}: ${errorText}`);
@@ -26,6 +69,107 @@ async function fetchApi(path, params = {}) {
   }
 }
 
+/* Helper générique pour les requêtes JSON (POST / PUT / DELETE) avec auth */
+async function sendJson(path, method, body) {
+  const url = `${BASE_URL}${path}`;
+  const options = {
+    method,
+    headers: authHeaders(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
+  };
+  if (body !== undefined) {
+    options.body = JSON.stringify(body);
+  }
+
+  try {
+    const response = await fetch(url, options);
+    if (response.status === 401) {
+      handleUnauthorized();
+      throw new Error('Session expirée, veuillez vous reconnecter.');
+    }
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error(`Erreur API [${response.status}] ${path}: ${errorText}`);
+      throw new Error(`Erreur ${response.status}: ${errorText}`);
+    }
+    /* Certaines réponses (204, DELETE) peuvent ne pas contenir de corps JSON */
+    const text = await response.text();
+    return text ? JSON.parse(text) : null;
+  } catch (error) {
+    console.error(`Erreur lors de l'appel API ${path}:`, error);
+    throw error;
+  }
+}
+
+/* Authentification : POST /auth/login en x-www-form-urlencoded (OAuth2) */
+export async function login(username, password) {
+  const body = new URLSearchParams();
+  body.append('username', username);
+  body.append('password', password);
+
+  const response = await fetch(`${BASE_URL}/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  });
+
+  if (response.status === 401) {
+    throw new Error('Identifiants invalides');
+  }
+  if (response.status === 429) {
+    throw new Error('Trop de tentatives. Veuillez réessayer dans une minute.');
+  }
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Erreur ${response.status}: ${errorText}`);
+  }
+
+  const data = await response.json();
+  setToken(data.access_token);
+  return data.user;
+}
+
+/* Récupère le profil de l'utilisateur connecté */
+export async function getMe() {
+  return fetchApi('/auth/me');
+}
+
+/* ---------- Administration des utilisateurs ---------- */
+
+export async function getUsers() {
+  return fetchApi('/admin/users');
+}
+
+export async function createUser({ username, email, password, role }) {
+  return sendJson('/admin/users', 'POST', { username, email, password, role });
+}
+
+export async function updateUser(id_user, changes) {
+  return sendJson(`/admin/users/${id_user}`, 'PUT', changes);
+}
+
+export async function deleteUser(id_user) {
+  return sendJson(`/admin/users/${id_user}`, 'DELETE');
+}
+
+export async function resetUserPassword(id_user, password) {
+  return sendJson(`/admin/users/${id_user}/reset-password`, 'POST', { password });
+}
+
+/* Journal d'audit */
+export async function getJournal(limit = 200) {
+  return fetchApi('/admin/journal', { limit });
+}
+
+/* ---------- RGPD : données personnelles ---------- */
+
+export async function exportMyData() {
+  return fetchApi('/me/data-export');
+}
+
+export async function deleteMyAccount() {
+  return sendJson('/me', 'DELETE');
+}
+
 /* Santé de l'API */
 export async function getHealth() {
   return fetchApi('/health');
@@ -46,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 });
@@ -103,6 +299,18 @@ export async function getDashboard(service, categorie) {
   })) : data;
 }
 
+/* Récupère les valeurs de filtre qui ramènent au moins un monitoring (VUE_CONSO).
+   Évite de proposer un service ou une catégorie du référentiel qui n'a aucun
+   monitoring rattaché, et donc de mener l'utilisateur sur un écran vide. */
+export async function getDashboardFiltres() {
+  const data = await fetchApi('/dashboard/filtres');
+  return {
+    services: Array.isArray(data?.services) ? data.services : [],
+    categories: Array.isArray(data?.categories) ? data.categories : [],
+    combinaisons: Array.isArray(data?.combinaisons) ? data.combinaisons : [],
+  };
+}
+
 /* Récupère le résumé global KPI du dashboard */
 export async function getDashboardSummary() {
   const data = await fetchApi('/dashboard/summary');

DataSentinel/src/test/setup.js

@@ -0,0 +1,7 @@
+/* Configuration globale des tests : matchers jest-dom + nettoyage du localStorage */
+import '@testing-library/jest-dom';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  localStorage.clear();
+});

DataSentinel/src/utils/dates.js

@@ -0,0 +1,17 @@
+/* Formate une date au format attendu par <input type="date"> (YYYY-MM-DD).
+   On lit les composantes en heure locale plutôt que d'utiliser toISOString(),
+   qui bascule en UTC : un 1er janvier saisi depuis Paris (UTC+1) y devient le
+   31 décembre de l'année précédente. */
+export function formatDateISO(date) {
+  const mois = String(date.getMonth() + 1).padStart(2, '0');
+  const jour = String(date.getDate()).padStart(2, '0');
+  return `${date.getFullYear()}-${mois}-${jour}`;
+}
+
+/* Période affichée par défaut : du 1er janvier de l'année courante à aujourd'hui. */
+export function periodeParDefaut(aujourdhui = new Date()) {
+  return {
+    debut: formatDateISO(new Date(aujourdhui.getFullYear(), 0, 1)),
+    fin: formatDateISO(aujourdhui),
+  };
+}

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)' };
+}

DataSentinel/vite.config.js

@@ -6,4 +6,9 @@ export default defineConfig({
   plugins: [
     react(),
   ],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './src/test/setup.js',
+  },
 })