Code en Rust pour windows

.gitignore

@@ -0,0 +1,18 @@
+__pycache__/
+*.pyc
+.venv/
+venv/
+data/config.json
+data/alerts.json
+*.log
+.env
+imput/
+logTest/
+log/
+CLAUDE.md
+docs/
+.claude/
+*.spec
+build/
+dist/
+docs/

Cargo.toml

@@ -17,7 +17,6 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tower-sessions = { version = "0.12", features = ["memory-store"] }
 tower = "0.4"
-tower_governor = "0.4"
 tower-http = { version = "0.5", features = ["fs"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }

src/main.rs

@@ -4,6 +4,271 @@ mod alerter;
 mod user_monitor;
 mod routes;
 
-fn main() {
-    println!("Supervision");
+use std::sync::Arc;
+use tokio::sync::Mutex as AsyncMutex;
+use tower_sessions::{MemoryStore, SessionManagerLayer};
+use tower_http::services::ServeDir;
+use axum::{
+    Router,
+    routing::{get, post},
+    http::HeaderValue,
+};
+
+use config::ConfigManager;
+use monitor::SystemMonitor;
+use alerter::Alerter;
+use user_monitor::UserMonitor;
+use routes::{
+    AppState,
+    auth::{login_get, login_post, logout},
+    dashboard::{dashboard, api_metrics, toggle_monitoring},
+    settings::{
+        settings_get, update_thresholds, update_monitoring, update_smtp,
+        test_smtp, update_processes, update_password, update_port,
+        update_amadea_log_path, update_user_thresholds,
+    },
+    alerts::{alerts_get, clear_alerts},
+    users::{users_get, api_users, api_users_weekly},
+};
+
+pub async fn run_server() {
+    // Init config
+    let config_manager = Arc::new(AsyncMutex::new(ConfigManager::new()));
+
+    // Init services
+    let alerter = Arc::new(Alerter);
+    let monitor = Arc::new(SystemMonitor::new(
+        config_manager.clone(),
+        alerter.clone(),
+    ));
+    let user_monitor = Arc::new(UserMonitor::new(config_manager.clone()));
+
+    // Démarrer monitoring et user monitor
+    monitor.clone().start().await;
+    {
+        let m = monitor.clone();
+        let _ = m.collect().await;
+    }
+    user_monitor.clone().start().await;
+
+    // App state
+    let state = AppState::new(
+        config_manager.clone(),
+        monitor,
+        alerter,
+        user_monitor,
+    );
+
+    // Sessions
+    let session_store = MemoryStore::default();
+    let session_layer = SessionManagerLayer::new(session_store)
+        .with_secure(false)
+        .with_name("supervision_session");
+
+    let app = Router::new()
+        .route("/login", get(login_get))
+        .route("/login", post(login_post))
+        .route("/logout", get(logout))
+        .route("/", get(dashboard))
+        .route("/api/metrics", get(api_metrics))
+        .route("/api/monitoring/toggle", post(toggle_monitoring))
+        .route("/settings", get(settings_get))
+        .route("/settings/thresholds", post(update_thresholds))
+        .route("/settings/monitoring", post(update_monitoring))
+        .route("/settings/smtp", post(update_smtp))
+        .route("/settings/smtp/test", post(test_smtp))
+        .route("/settings/processes", post(update_processes))
+        .route("/settings/password", post(update_password))
+        .route("/settings/port", post(update_port))
+        .route("/settings/amadea-log-path", post(update_amadea_log_path))
+        .route("/settings/user-thresholds", post(update_user_thresholds))
+        .route("/alerts", get(alerts_get))
+        .route("/alerts/clear", post(clear_alerts))
+        .route("/users", get(users_get))
+        .route("/api/users", get(api_users))
+        .route("/api/users/activity/weekly", get(api_users_weekly))
+        .nest_service("/static", ServeDir::new("static"))
+        .layer(session_layer)
+        .with_state(state.clone())
+        .layer(axum::middleware::map_response(|mut response: axum::response::Response| async move {
+            let headers = response.headers_mut();
+            headers.insert("X-Content-Type-Options", HeaderValue::from_static("nosniff"));
+            headers.insert("X-Frame-Options", HeaderValue::from_static("DENY"));
+            headers.insert("X-XSS-Protection", HeaderValue::from_static("1; mode=block"));
+            response
+        }));
+
+    let port = {
+        let cm = state.config_manager.lock().await;
+        cm.config.port
+    };
+
+    let addr = format!("0.0.0.0:{}", port);
+    tracing::info!("Supervision démarré sur http://localhost:{}", port);
+
+    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
+    axum::serve(listener, app).await.unwrap();
+}
+
+#[tokio::main]
+async fn main() {
+    tracing_subscriber::fmt::init();
+
+    let args: Vec<String> = std::env::args().collect();
+
+    #[cfg(windows)]
+    {
+        if args.get(1).map(|s| s.as_str()) == Some("install") {
+            service::install_service();
+            return;
+        }
+        if args.get(1).map(|s| s.as_str()) == Some("uninstall") {
+            service::uninstall_service();
+            return;
+        }
+        if service::is_running_as_service() {
+            service::run_service();
+            return;
+        }
+    }
+
+    #[cfg(not(windows))]
+    let _ = args;
+
+    run_server().await;
+}
+
+#[cfg(windows)]
+mod service {
+    use std::ffi::OsString;
+    use std::time::Duration;
+    use windows_service::{
+        define_windows_service,
+        service::{
+            ServiceAccess, ServiceControl, ServiceControlAccept, ServiceErrorControl,
+            ServiceExitCode, ServiceInfo, ServiceStartType, ServiceState, ServiceStatus,
+            ServiceType,
+        },
+        service_control_handler::{self, ServiceControlHandlerResult},
+        service_dispatcher,
+        service_manager::{ServiceManager, ServiceManagerAccess},
+    };
+
+    const SERVICE_NAME: &str = "Supervision";
+    const SERVICE_DISPLAY: &str = "Supervision - Monitoring Système";
+    const SERVICE_DESCRIPTION: &str =
+        "Surveille CPU, RAM, disques et processus. Interface web sur http://localhost:5000";
+
+    pub fn install_service() {
+        let manager = ServiceManager::local_computer(
+            None::<&str>,
+            ServiceManagerAccess::CREATE_SERVICE,
+        )
+        .expect("Impossible d'ouvrir le Service Manager (lancer en administrateur)");
+
+        let exe_path = std::env::current_exe().unwrap();
+
+        let service_info = ServiceInfo {
+            name: OsString::from(SERVICE_NAME),
+            display_name: OsString::from(SERVICE_DISPLAY),
+            service_type: ServiceType::OWN_PROCESS,
+            start_type: ServiceStartType::AutoStart,
+            error_control: ServiceErrorControl::Normal,
+            executable_path: exe_path,
+            launch_arguments: vec![],
+            dependencies: vec![],
+            account_name: None,
+            account_password: None,
+        };
+
+        let service = manager
+            .create_service(&service_info, ServiceAccess::CHANGE_CONFIG)
+            .expect("Impossible de créer le service");
+
+        service
+            .set_description(SERVICE_DESCRIPTION)
+            .expect("Impossible de définir la description");
+
+        println!("Service '{}' installé avec succès.", SERVICE_NAME);
+        println!("Démarrer avec: sc start {}", SERVICE_NAME);
+    }
+
+    pub fn uninstall_service() {
+        let manager = ServiceManager::local_computer(
+            None::<&str>,
+            ServiceManagerAccess::CONNECT,
+        )
+        .expect("Impossible d'ouvrir le Service Manager");
+
+        let service = manager
+            .open_service(SERVICE_NAME, ServiceAccess::DELETE)
+            .expect("Service introuvable");
+
+        service.delete().expect("Impossible de supprimer le service");
+        println!("Service '{}' désinstallé.", SERVICE_NAME);
+    }
+
+    pub fn is_running_as_service() -> bool {
+        // Heuristique : variable SESSIONNAME absente = pas de session interactive
+        std::env::var("SESSIONNAME").is_err()
+    }
+
+    define_windows_service!(ffi_service_main, service_main);
+
+    fn service_main(_arguments: Vec<OsString>) {
+        let rt = tokio::runtime::Runtime::new().unwrap();
+        rt.block_on(async {
+            let (shutdown_tx, shutdown_rx) = tokio::sync::oneshot::channel::<()>();
+
+            let mut shutdown_tx = Some(shutdown_tx);
+            let status_handle = service_control_handler::register(
+                SERVICE_NAME,
+                move |control| match control {
+                    ServiceControl::Stop => {
+                        if let Some(tx) = shutdown_tx.take() {
+                            let _ = tx.send(());
+                        }
+                        ServiceControlHandlerResult::NoError
+                    }
+                    ServiceControl::Interrogate => ServiceControlHandlerResult::NoError,
+                    _ => ServiceControlHandlerResult::NotImplemented,
+                },
+            )
+            .unwrap();
+
+            status_handle
+                .set_service_status(ServiceStatus {
+                    service_type: ServiceType::OWN_PROCESS,
+                    current_state: ServiceState::Running,
+                    controls_accepted: ServiceControlAccept::STOP,
+                    exit_code: ServiceExitCode::Win32(0),
+                    checkpoint: 0,
+                    wait_hint: Duration::default(),
+                    process_id: None,
+                })
+                .unwrap();
+
+            tokio::select! {
+                _ = crate::run_server() => {},
+                _ = shutdown_rx => {},
+            }
+
+            status_handle
+                .set_service_status(ServiceStatus {
+                    service_type: ServiceType::OWN_PROCESS,
+                    current_state: ServiceState::Stopped,
+                    controls_accepted: ServiceControlAccept::empty(),
+                    exit_code: ServiceExitCode::Win32(0),
+                    checkpoint: 0,
+                    wait_hint: Duration::default(),
+                    process_id: None,
+                })
+                .unwrap();
+        });
+    }
+
+    pub fn run_service() {
+        service_dispatcher::start(SERVICE_NAME, ffi_service_main)
+            .expect("Impossible de démarrer le service dispatcher");
+    }
 }

src/user_monitor.rs

@@ -1,4 +1,4 @@
-use chrono::{Duration, Local, NaiveDateTime};
+use chrono::{Duration, Local, NaiveDateTime, Timelike};
 use regex::Regex;
 use serde::{Deserialize, Serialize};
 use std::collections::{HashMap, HashSet};

static/style.css

@@ -0,0 +1,48 @@
+/* Supervision — Style */
+
+body {
+    background-color: #f4f6f9;
+    font-size: 0.9rem;
+}
+
+.metric-card {
+    transition: border-color 0.3s;
+}
+
+.metric-card .metric-value {
+    font-size: 2.2rem;
+    font-weight: 700;
+    line-height: 1.1;
+}
+
+.card {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.badge {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+}
+
+.table th {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    color: #6c757d;
+    border-bottom-width: 1px;
+}
+
+.navbar-brand i {
+    color: #4fc3f7;
+}
+
+/* Statut couleurs */
+.border-success { border-left: 4px solid #198754 !important; }
+.border-warning { border-left: 4px solid #ffc107 !important; }
+.border-danger { border-left: 4px solid #dc3545 !important; }
+
+/* Responsive */
+@media (max-width: 768px) {
+    .metric-card .metric-value {
+        font-size: 1.8rem;
+    }
+}

templates/alerts.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+{% block title %}Supervision - Alertes{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <h4 class="mb-0"><i class="bi bi-bell"></i> Historique des alertes</h4>
+    {% if alerts %}
+    <form method="POST" action="/alerts/clear">
+        <button type="submit" class="btn btn-sm btn-outline-danger"
+                onclick="return confirm('Effacer tout l\'historique ?')">
+            <i class="bi bi-trash"></i> Effacer l'historique
+        </button>
+    </form>
+    {% endif %}
+</div>
+
+{% if not alerts %}
+<div class="alert alert-info">
+    <i class="bi bi-info-circle"></i> Aucune alerte enregistrée.
+</div>
+{% else %}
+<div class="card">
+    <div class="card-body p-0">
+        <table class="table table-hover mb-0">
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Type</th>
+                    <th>Message</th>
+                    <th>Valeur</th>
+                    <th>Seuil</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for alert in alerts %}
+                <tr>
+                    <td class="text-nowrap">
+                        <small>{{ alert.timestamp_display }}</small>
+                    </td>
+                    <td>
+                        {% if alert.type == "process_down" %}
+                        <span class="badge bg-danger">Processus</span>
+                        {% else %}
+                        <span class="badge bg-warning text-dark">Seuil</span>
+                        {% endif %}
+                    </td>
+                    <td>{{ alert.message }}</td>
+                    <td>{{ alert.value }}</td>
+                    <td>{{ alert.threshold }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+<div class="text-muted small mt-2">
+    {{ alerts | length }} alerte(s) — les 500 dernières sont conservées.
+</div>
+{% endif %}
+{% endblock %}

templates/base.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Supervision{% endblock %}</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
+    <link href="/static/style.css" rel="stylesheet">
+</head>
+<body>
+    {% if is_authenticated %}
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">
+                <i class="bi bi-activity"></i> Supervision
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item">
+                        <a class="nav-link {% if active_page == "dashboard" %}active{% endif %}" href="/">
+                            <i class="bi bi-speedometer2"></i> Tableau de bord
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link {% if active_page == "settings" %}active{% endif %}" href="/settings">
+                            <i class="bi bi-gear"></i> Configuration
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link {% if active_page == "alerts" %}active{% endif %}" href="/alerts">
+                            <i class="bi bi-bell"></i> Alertes
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link {% if active_page == "users" %}active{% endif %}" href="/users">
+                            <i class="bi bi-people"></i> Utilisateurs
+                        </a>
+                    </li>
+                </ul>
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/logout">
+                            <i class="bi bi-box-arrow-right"></i> Déconnexion
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    {% endif %}
+
+    <div class="container-fluid mt-3">
+        {% if flash_messages %}
+            {% for item in flash_messages %}
+            <div class="alert alert-{{ item.0 }} alert-dismissible fade show" role="alert">
+                {{ item.1 }}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            </div>
+            {% endfor %}
+        {% endif %}
+
+        {% if default_pw is defined and default_pw %}
+        <div class="alert alert-danger">
+            <i class="bi bi-exclamation-triangle"></i>
+            <strong>Sécurité :</strong> Le mot de passe par défaut est encore actif.
+            <a href="/settings#password" class="alert-link">Changez-le maintenant</a>.
+        </div>
+        {% endif %}
+
+        {% block content %}{% endblock %}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/dashboard.html

@@ -0,0 +1,243 @@
+{% extends "base.html" %}
+{% block title %}Supervision - Tableau de bord{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <h4 class="mb-0">
+        <i class="bi bi-speedometer2"></i> Tableau de bord
+        {% if metrics and metrics.hostname %}
+        <small class="text-muted">— {{ metrics.hostname }}</small>
+        {% endif %}
+    </h4>
+    <div class="d-flex align-items-center gap-2">
+        <span id="last-update" class="text-muted small"></span>
+        <form method="POST" action="/api/monitoring/toggle" class="d-inline">
+            {% if metrics and metrics.monitoring_active %}
+            <button type="submit" class="btn btn-sm btn-outline-warning">
+                <i class="bi bi-pause-circle"></i> Pause
+            </button>
+            {% else %}
+            <button type="submit" class="btn btn-sm btn-outline-success">
+                <i class="bi bi-play-circle"></i> Démarrer
+            </button>
+            {% endif %}
+        </form>
+    </div>
+</div>
+
+{% if not metrics %}
+<div class="alert alert-info">
+    <i class="bi bi-hourglass-split"></i> Collecte des métriques en cours...
+</div>
+{% else %}
+
+<!-- Infos système -->
+<div class="row mb-3">
+    <div class="col-12">
+        <div class="card bg-dark text-light">
+            <div class="card-body py-2 d-flex gap-4 flex-wrap small">
+                <span><i class="bi bi-pc-display"></i> <strong id="sys-hostname">{{ metrics.hostname }}</strong></span>
+                <span><i class="bi bi-windows"></i> <span id="sys-os">{{ metrics.os }}</span></span>
+                <span><i class="bi bi-clock-history"></i> Uptime: <span id="sys-uptime">{{ metrics.uptime }}</span></span>
+                <span><i class="bi bi-cpu"></i> <span id="sys-cores">{{ metrics.cpu.cores }}</span> cœurs</span>
+                <span><i class="bi bi-memory"></i> <span id="sys-ram-total">{{ metrics.ram.total_gb }}</span> Go RAM</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Métriques principales -->
+<div class="row mb-3" id="main-metrics">
+    <!-- CPU -->
+    <div class="col-md-4 mb-3">
+        <div class="card metric-card" id="card-cpu">
+            <div class="card-body">
+                <div class="d-flex justify-content-between">
+                    <h6 class="card-title"><i class="bi bi-cpu"></i> CPU</h6>
+                    <span class="badge" id="badge-cpu">{{ metrics.cpu.status }}</span>
+                </div>
+                <div class="metric-value" id="val-cpu">{{ metrics.cpu.percent }}%</div>
+                <div class="progress mt-2" style="height: 8px;">
+                    <div class="progress-bar" id="bar-cpu" role="progressbar"
+                         style="width: {{ metrics.cpu.percent }}%"></div>
+                </div>
+                <small class="text-muted">Seuil: <span id="thresh-cpu">{{ metrics.cpu.threshold }}</span>%</small>
+            </div>
+        </div>
+    </div>
+    <!-- RAM -->
+    <div class="col-md-4 mb-3">
+        <div class="card metric-card" id="card-ram">
+            <div class="card-body">
+                <div class="d-flex justify-content-between">
+                    <h6 class="card-title"><i class="bi bi-memory"></i> RAM</h6>
+                    <span class="badge" id="badge-ram">{{ metrics.ram.status }}</span>
+                </div>
+                <div class="metric-value" id="val-ram">{{ metrics.ram.percent }}%</div>
+                <div class="progress mt-2" style="height: 8px;">
+                    <div class="progress-bar" id="bar-ram" role="progressbar"
+                         style="width: {{ metrics.ram.percent }}%"></div>
+                </div>
+                <small class="text-muted">
+                    <span id="ram-used">{{ metrics.ram.used_gb }}</span> /
+                    <span id="ram-total">{{ metrics.ram.total_gb }}</span> Go
+                    — Seuil: <span id="thresh-ram">{{ metrics.ram.threshold }}</span>%
+                </small>
+            </div>
+        </div>
+    </div>
+    <!-- Disques -->
+    {% for disk in metrics.disks %}
+    <div class="col-md-4 mb-3">
+        <div class="card metric-card" id="card-disk-{{ loop.index0 }}">
+            <div class="card-body">
+                <div class="d-flex justify-content-between">
+                    <h6 class="card-title"><i class="bi bi-hdd"></i> {{ disk.drive }}</h6>
+                    <span class="badge" id="badge-disk-{{ loop.index0 }}">{{ disk.status }}</span>
+                </div>
+                <div class="metric-value" id="val-disk-{{ loop.index0 }}">{{ disk.percent }}%</div>
+                <div class="progress mt-2" style="height: 8px;">
+                    <div class="progress-bar" id="bar-disk-{{ loop.index0 }}" role="progressbar"
+                         style="width: {{ disk.percent }}%"></div>
+                </div>
+                <small class="text-muted">
+                    {{ disk.used_gb }} / {{ disk.total_gb }} Go
+                    ({{ disk.free_gb }} Go libres)
+                    — Seuil: {{ disk.threshold }}%
+                </small>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+<!-- Processus surveillés -->
+<div class="row mb-3">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header">
+                <h6 class="mb-0"><i class="bi bi-list-task"></i> Processus surveillés</h6>
+            </div>
+            <div class="card-body p-0">
+                <table class="table table-hover mb-0" id="process-table">
+                    <thead>
+                        <tr>
+                            <th>Processus</th>
+                            <th>Statut</th>
+                            <th>Instances</th>
+                            <th>Mémoire</th>
+                            <th>CPU</th>
+                            <th>PID(s)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for proc in metrics.processes %}
+                        <tr>
+                            <td>
+                                <strong>{{ proc.name }}</strong>
+                                <br><small class="text-muted">pattern: {{ proc.pattern }}</small>
+                            </td>
+                            <td>
+                                {% if not proc.enabled %}
+                                <span class="badge bg-secondary">Désactivé</span>
+                                {% elif proc.running %}
+                                <span class="badge bg-success">Actif</span>
+                                {% else %}
+                                <span class="badge bg-danger">Arrêté</span>
+                                {% endif %}
+                            </td>
+                            <td>{{ proc.instance_count }}</td>
+                            <td>
+                                {{ proc.total_memory_mb }} Mo
+                                {% if proc.memory_threshold_mb > 0 %}
+                                <br><small class="text-muted">seuil: {{ proc.memory_threshold_mb }} Mo</small>
+                                {% endif %}
+                            </td>
+                            <td>{{ proc.total_cpu_percent }}%</td>
+                            <td><small>{{ proc.pids | join(sep=", ") }}</small></td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Alertes récentes -->
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between">
+                <h6 class="mb-0"><i class="bi bi-bell"></i> Alertes récentes</h6>
+                <a href="/alerts" class="btn btn-sm btn-outline-primary">Voir tout</a>
+            </div>
+            <div class="card-body p-0">
+                <table class="table table-sm mb-0" id="recent-alerts">
+                    <tbody>
+                        <!-- Rempli par JS -->
+                    </tbody>
+                </table>
+                <div id="no-alerts" class="text-center text-muted py-3">
+                    Aucune alerte récente.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script>
+const statusColors = {
+    ok: 'success',
+    warning: 'warning',
+    critical: 'danger'
+};
+
+function updateMetric(id, percent, status) {
+    const card = document.getElementById('card-' + id);
+    const badge = document.getElementById('badge-' + id);
+    const bar = document.getElementById('bar-' + id);
+    const val = document.getElementById('val-' + id);
+    if (!card) return;
+
+    val.textContent = percent + '%';
+    bar.style.width = percent + '%';
+
+    const color = statusColors[status] || 'secondary';
+    badge.textContent = status;
+    badge.className = 'badge bg-' + color;
+    bar.className = 'progress-bar bg-' + color;
+    card.className = 'card metric-card border-' + color;
+}
+
+function refreshMetrics() {
+    fetch('/api/metrics')
+        .then(r => r.json())
+        .then(data => {
+            if (!data || !data.cpu) return;
+
+            updateMetric('cpu', data.cpu.percent, data.cpu.status);
+            updateMetric('ram', data.ram.percent, data.ram.status);
+
+            document.getElementById('ram-used').textContent = data.ram.used_gb;
+            document.getElementById('sys-uptime').textContent = data.uptime;
+
+            data.disks.forEach((disk, i) => {
+                updateMetric('disk-' + i, disk.percent, disk.status);
+            });
+
+            const now = new Date();
+            document.getElementById('last-update').textContent =
+                'Mis à jour: ' + now.toLocaleTimeString('fr-FR');
+        })
+        .catch(() => {});
+}
+
+// Rafraîchir toutes les 30 secondes
+setInterval(refreshMetrics, 30000);
+</script>
+{% endblock %}

templates/login.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Supervision - Connexion</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
+    <style>
+        body { background: #1a1a2e; min-height: 100vh; display: flex; align-items: center; }
+        .login-card { max-width: 400px; margin: auto; }
+        .brand { color: #e2e8f0; text-align: center; margin-bottom: 2rem; }
+        .brand i { font-size: 3rem; color: #4fc3f7; }
+        .brand h1 { font-size: 1.5rem; margin-top: 0.5rem; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="login-card">
+            <div class="brand">
+                <i class="bi bi-activity"></i>
+                <h1>Supervision</h1>
+                <small class="text-secondary">Monitoring système</small>
+            </div>
+
+            {% if flash_messages %}
+                {% for item in flash_messages %}
+                <div class="alert alert-{{ item.0 }} alert-dismissible fade show" role="alert">
+                    {{ item.1 }}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                </div>
+                {% endfor %}
+            {% endif %}
+
+            <div class="card shadow">
+                <div class="card-body p-4">
+                    <form method="POST" action="/login">
+                        <div class="mb-3">
+                            <label for="username" class="form-label">Identifiant</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="bi bi-person"></i></span>
+                                <input type="text" class="form-control" id="username" name="username"
+                                       required autofocus autocomplete="username">
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="password" class="form-label">Mot de passe</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                                <input type="password" class="form-control" id="password" name="password"
+                                       required autocomplete="current-password">
+                            </div>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100">
+                            <i class="bi bi-box-arrow-in-right"></i> Connexion
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

templates/settings.html

@@ -0,0 +1,320 @@
+{% extends "base.html" %}
+{% block title %}Supervision - Configuration{% endblock %}
+
+{% block content %}
+<h4 class="mb-3"><i class="bi bi-gear"></i> Configuration</h4>
+
+<div class="row">
+    <div class="col-lg-6 mb-4">
+        <div class="card">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-sliders"></i> Seuils d'alerte (%)</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/thresholds">
+                    <div class="mb-3">
+                        <label for="cpu_percent" class="form-label">CPU (%)</label>
+                        <input type="number" class="form-control" id="cpu_percent" name="cpu_percent"
+                               value="{{ config.thresholds.cpu_percent }}" min="1" max="100" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="ram_percent" class="form-label">RAM (%)</label>
+                        <input type="number" class="form-control" id="ram_percent" name="ram_percent"
+                               value="{{ config.thresholds.ram_percent }}" min="1" max="100" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="disk_percent" class="form-label">Disque (%)</label>
+                        <input type="number" class="form-control" id="disk_percent" name="disk_percent"
+                               value="{{ config.thresholds.disk_percent }}" min="1" max="100" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-lg-6 mb-4">
+        <div class="card">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-clock"></i> Fréquence et alertes</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/monitoring">
+                    <div class="mb-3">
+                        <label for="check_interval_minutes" class="form-label">Intervalle de vérification (minutes)</label>
+                        <input type="number" class="form-control" id="check_interval_minutes"
+                               name="check_interval_minutes" value="{{ config.check_interval_minutes }}" min="1" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="alert_cooldown_minutes" class="form-label">Cooldown entre alertes (minutes)</label>
+                        <input type="number" class="form-control" id="alert_cooldown_minutes"
+                               name="alert_cooldown_minutes" value="{{ config.alert_cooldown_minutes }}" min="1" required>
+                        <div class="form-text">Délai minimum entre deux alertes du même type.</div>
+                    </div>
+                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
+                </form>
+            </div>
+        </div>
+
+        <div class="card mt-4">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-diagram-3"></i> Port de l'application</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/port">
+                    <div class="mb-3">
+                        <label for="port" class="form-label">Port (redémarrage requis)</label>
+                        <input type="number" class="form-control" id="port" name="port"
+                               value="{{ config.port }}" min="1024" max="65535" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- SMTP -->
+<div class="row">
+    <div class="col-12 mb-4">
+        <div class="card">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-envelope"></i> Configuration SMTP</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/smtp">
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="smtp_server" class="form-label">Serveur SMTP</label>
+                            <input type="text" class="form-control" id="smtp_server" name="smtp_server"
+                                   value="{{ smtp.server }}" placeholder="smtp.example.com">
+                        </div>
+                        <div class="col-md-3 mb-3">
+                            <label for="smtp_port" class="form-label">Port</label>
+                            <input type="number" class="form-control" id="smtp_port" name="smtp_port"
+                                   value="{{ smtp.port }}">
+                        </div>
+                        <div class="col-md-3 mb-3 d-flex align-items-end">
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" id="smtp_tls" name="smtp_tls"
+                                       {% if smtp.use_tls %}checked{% endif %}>
+                                <label class="form-check-label" for="smtp_tls">STARTTLS</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="smtp_username" class="form-label">Nom d'utilisateur</label>
+                            <input type="text" class="form-control" id="smtp_username" name="smtp_username"
+                                   value="{{ smtp.username }}" autocomplete="off">
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="smtp_password" class="form-label">Mot de passe</label>
+                            <input type="password" class="form-control" id="smtp_password" name="smtp_password"
+                                   placeholder="{% if smtp_password_masked %}{{ smtp_password_masked }}{% else %}Non défini{% endif %}"
+                                   autocomplete="new-password">
+                            <div class="form-text">Laissez vide pour conserver le mot de passe actuel.</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="smtp_from" class="form-label">Email expéditeur</label>
+                            <input type="email" class="form-control" id="smtp_from" name="smtp_from"
+                                   value="{{ smtp.from_email }}" placeholder="supervision@example.com">
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="smtp_to" class="form-label">Destinataires (séparés par virgules)</label>
+                            <input type="text" class="form-control" id="smtp_to" name="smtp_to"
+                                   value="{{ smtp.to_emails | join(sep=', ') }}"
+                                   placeholder="admin@example.com, tech@example.com">
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
+                </form>
+                <hr>
+                <form method="POST" action="/settings/smtp/test" class="d-inline">
+                    <button type="submit" class="btn btn-outline-info">
+                        <i class="bi bi-send"></i> Envoyer un email de test
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Processus surveillés -->
+<div class="row">
+    <div class="col-12 mb-4">
+        <div class="card">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-list-task"></i> Processus surveillés</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/processes" id="process-form">
+                    <table class="table" id="proc-table">
+                        <thead>
+                            <tr>
+                                <th>Nom</th><th>Pattern</th><th>Seuil mémoire (Mo)</th>
+                                <th>Actif</th><th>Alerte si arrêté</th><th></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for proc in config.processes %}
+                            <tr>
+                                <td><input type="text" class="form-control form-control-sm" name="proc_name[]" value="{{ proc.name }}" required></td>
+                                <td><input type="text" class="form-control form-control-sm" name="proc_pattern[]" value="{{ proc.pattern }}" required></td>
+                                <td>
+                                    <input type="number" class="form-control form-control-sm" name="proc_mem_threshold[]" value="{{ proc.memory_threshold_mb }}" min="0">
+                                    <div class="form-text">0 = pas de seuil</div>
+                                </td>
+                                <td>
+                                    <div class="form-check">
+                                        <input type="checkbox" class="form-check-input" name="proc_enabled[]" value="{{ loop.index0 }}"
+                                               {% if proc.enabled %}checked{% endif %}>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-check">
+                                        <input type="checkbox" class="form-check-input" name="proc_alert_down[]" value="{{ loop.index0 }}"
+                                               {% if proc.alert_on_down %}checked{% endif %}>
+                                    </div>
+                                </td>
+                                <td>
+                                    <button type="button" class="btn btn-sm btn-outline-danger btn-remove-proc">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                    <div class="d-flex gap-2">
+                        <button type="button" class="btn btn-outline-success" id="btn-add-proc">
+                            <i class="bi bi-plus-lg"></i> Ajouter un processus
+                        </button>
+                        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Mot de passe -->
+<div class="row" id="password">
+    <div class="col-lg-6 mb-4">
+        <div class="card {% if default_pw %}border-danger{% endif %}">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-shield-lock"></i> Mot de passe administrateur</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/password">
+                    <div class="mb-3">
+                        <label for="current_password" class="form-label">Mot de passe actuel</label>
+                        <input type="password" class="form-control" id="current_password" name="current_password" required autocomplete="current-password">
+                    </div>
+                    <div class="mb-3">
+                        <label for="new_password" class="form-label">Nouveau mot de passe</label>
+                        <input type="password" class="form-control" id="new_password" name="new_password" required minlength="8" autocomplete="new-password">
+                        <div class="form-text">Minimum 8 caractères.</div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="confirm_password" class="form-label">Confirmer le mot de passe</label>
+                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required autocomplete="new-password">
+                    </div>
+                    <button type="submit" class="btn btn-warning"><i class="bi bi-check-lg"></i> Changer le mot de passe</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Amadea + seuils utilisateurs -->
+<div class="row">
+    <div class="col-lg-6 mb-4">
+        <div class="card">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-folder2-open"></i> Chemin des logs Amadea</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/amadea-log-path">
+                    <div class="mb-3">
+                        <label for="amadea_log_path" class="form-label">Dossier des logs</label>
+                        <input type="text" class="form-control" id="amadea_log_path" name="amadea_log_path"
+                               value="{{ config.amadea_log_path }}"
+                               placeholder="C:\ProgramData\ISoft\Amadea Web 8 x64\data\logs">
+                        <div class="form-text">Dossier contenant les fichiers isoft_*.txt et awevents_*.txt.</div>
+                    </div>
+                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-6 mb-4">
+        <div class="card">
+            <div class="card-header"><h6 class="mb-0"><i class="bi bi-people"></i> Seuils statut utilisateurs</h6></div>
+            <div class="card-body">
+                <form method="POST" action="/settings/user-thresholds">
+                    <div class="mb-3">
+                        <label for="active_minutes" class="form-label">Actif si dernière action &lt; (minutes)</label>
+                        <input type="number" class="form-control" id="active_minutes" name="active_minutes"
+                               value="{{ config.user_status_thresholds.active_minutes }}" min="1" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="inactive_minutes" class="form-label">Inactif si dernière action &lt; (minutes)</label>
+                        <input type="number" class="form-control" id="inactive_minutes" name="inactive_minutes"
+                               value="{{ config.user_status_thresholds.inactive_minutes }}" min="1" required>
+                        <div class="form-text">Au-delà du seuil inactif, le statut passe à Déconnecté.</div>
+                    </div>
+                    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> Enregistrer</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Ajouter un processus via DOM (pas innerHTML pour la sécurité)
+document.getElementById('btn-add-proc').addEventListener('click', function() {
+    var tbody = document.querySelector('#proc-table tbody');
+    var idx = tbody.children.length;
+    var row = tbody.insertRow();
+
+    function makeInput(type, name, value, extra) {
+        var td = row.insertCell();
+        var input = document.createElement('input');
+        input.type = type;
+        input.className = 'form-control form-control-sm';
+        input.name = name;
+        if (value !== undefined) input.value = value;
+        if (extra) Object.assign(input, extra);
+        td.appendChild(input);
+        return td;
+    }
+    function makeCheckbox(name, value, checked) {
+        var td = row.insertCell();
+        var div = document.createElement('div');
+        div.className = 'form-check';
+        var cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.className = 'form-check-input';
+        cb.name = name;
+        cb.value = String(value);
+        cb.checked = checked;
+        div.appendChild(cb);
+        td.appendChild(div);
+    }
+
+    makeInput('text', 'proc_name[]', '', { required: true });
+    makeInput('text', 'proc_pattern[]', '', { required: true });
+    var tdMem = makeInput('number', 'proc_mem_threshold[]', '0', { min: 0 });
+    var hint = document.createElement('div');
+    hint.className = 'form-text';
+    hint.textContent = '0 = pas de seuil';
+    tdMem.appendChild(hint);
+    makeCheckbox('proc_enabled[]', idx, true);
+    makeCheckbox('proc_alert_down[]', idx, true);
+
+    var tdBtn = row.insertCell();
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'btn btn-sm btn-outline-danger btn-remove-proc';
+    btn.appendChild(document.createElement('i')).className = 'bi bi-trash';
+    tdBtn.appendChild(btn);
+});
+
+document.addEventListener('click', function(e) {
+    if (e.target.closest('.btn-remove-proc')) {
+        e.target.closest('tr').remove();
+    }
+});
+</script>
+{% endblock %}

templates/users.html

@@ -0,0 +1,300 @@
+{% extends "base.html" %}
+{% block title %}Supervision - Utilisateurs{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <h4 class="mb-0"><i class="bi bi-people"></i> Utilisateurs Amadea</h4>
+    <span id="last-update" class="text-muted small"></span>
+</div>
+
+<div id="alert-zone"></div>
+
+<!-- Graphique d'activite horaire -->
+<div class="card mb-3">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h6 class="mb-0"><i class="bi bi-bar-chart"></i> Utilisateurs actifs par heure</h6>
+        <select id="period-select" class="form-select form-select-sm" style="width: auto;">
+            <option value="today">Aujourd'hui</option>
+            <option value="7days">7 derniers jours</option>
+        </select>
+    </div>
+    <div class="card-body">
+        <div style="display: flex; gap: 6px;">
+            <div id="chart-yaxis"
+                 style="display: flex; flex-direction: column; justify-content: space-between;
+                        align-items: flex-end; width: 20px; height: 100px; flex-shrink: 0;">
+            </div>
+            <div style="flex: 1; min-width: 0;">
+                <div id="chart-container"
+                     style="height: 100px; display: flex; align-items: flex-end; gap: 3px;">
+                </div>
+                <div id="chart-labels" style="display: flex; gap: 3px; margin-top: 4px;"></div>
+            </div>
+        </div>
+        <div id="chart-unavailable" class="d-none">
+            <div class="alert alert-info mb-0">
+                <i class="bi bi-info-circle"></i>
+                Les donnees historiques des jours precedents ne sont pas disponibles (fichiers archives).
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Tableau utilisateurs -->
+<div class="card">
+    <div class="card-header">
+        <h6 class="mb-0"><i class="bi bi-person-lines-fill"></i> Utilisateurs connectes aujourd'hui</h6>
+    </div>
+    <div class="card-body p-0">
+        <table class="table table-hover mb-0">
+            <thead>
+                <tr>
+                    <th>Utilisateur</th>
+                    <th>Statut</th>
+                    <th>Derniere action</th>
+                    <th>Actions (24h)</th>
+                    <th>Depuis</th>
+                </tr>
+            </thead>
+            <tbody id="users-tbody"></tbody>
+        </table>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+var STATUS_CONFIG = {
+    actif:      { badge: 'bg-success',          label: 'ACTIF' },
+    inactif:    { badge: 'bg-warning text-dark', label: 'INACTIF' },
+    deconnecte: { badge: 'bg-secondary',         label: 'DECONNECTE' },
+};
+
+var currentHourly = [];
+var currentPeriod = 'today';
+
+/* --- Graphique CSS pur --- */
+
+function renderYAxis(max) {
+    var yaxis = document.getElementById('chart-yaxis');
+    yaxis.textContent = '';
+    var values = [max, Math.round(max / 2), 0];
+    values.forEach(function(v) {
+        var lbl = document.createElement('div');
+        lbl.style.fontSize  = '0.6rem';
+        lbl.style.color     = '#6c757d';
+        lbl.style.lineHeight = '1';
+        lbl.textContent = v;
+        yaxis.appendChild(lbl);
+    });
+}
+
+function renderChart(data) {
+    var container = document.getElementById('chart-container');
+    var labelsEl  = document.getElementById('chart-labels');
+    var unavail   = document.getElementById('chart-unavailable');
+
+    container.style.display = 'flex';
+    labelsEl.style.display  = 'flex';
+    unavail.classList.add('d-none');
+    container.textContent = '';
+    labelsEl.textContent  = '';
+
+    if (!data || data.length === 0) {
+        renderYAxis(0);
+        var msg = document.createElement('span');
+        msg.className = 'text-muted small';
+        msg.textContent = 'Aucune donnee disponible.';
+        container.appendChild(msg);
+        return;
+    }
+
+    var max = 1;
+    data.forEach(function(d) { if ((d.count || 0) > max) max = d.count; });
+    renderYAxis(max);
+
+    data.forEach(function(item) {
+        var count = item.count || 0;
+        var heightPct = count > 0 ? Math.max((count / max) * 100, 6) : 0;
+
+        var bar = document.createElement('div');
+        bar.style.flex         = '1';
+        bar.style.minWidth     = '14px';
+        bar.style.height       = heightPct + '%';
+        bar.style.background   = '#0d6efd';
+        bar.style.borderRadius = '3px 3px 0 0';
+        bar.style.opacity      = count > 0 ? '1' : '0.15';
+        bar.style.transition   = 'height 0.3s';
+        bar.title = item.hour !== undefined
+            ? item.hour + 'h : ' + count + ' utilisateur(s)'
+            : item.date + ' : ' + count + ' utilisateur(s)';
+        container.appendChild(bar);
+
+        var lbl = document.createElement('div');
+        lbl.style.flex      = '1';
+        lbl.style.minWidth  = '14px';
+        lbl.style.textAlign = 'center';
+        lbl.style.fontSize  = '0.6rem';
+        lbl.style.color     = '#6c757d';
+        lbl.style.overflow  = 'hidden';
+        if (item.hour !== undefined) {
+            lbl.textContent = item.hour % 3 === 0 ? item.hour + 'h' : '';
+        } else {
+            var d = new Date(item.date);
+            lbl.textContent = d.getUTCDate() + '/' + (d.getUTCMonth() + 1);
+        }
+        labelsEl.appendChild(lbl);
+    });
+}
+
+function renderWeekly(weekly) {
+    var unavail   = document.getElementById('chart-unavailable');
+    var container = document.getElementById('chart-container');
+    var labelsEl  = document.getElementById('chart-labels');
+
+    var allNull = weekly.every(function(d) { return d.count === null; });
+    if (allNull) {
+        container.style.display = 'none';
+        labelsEl.style.display  = 'none';
+        document.getElementById('chart-yaxis').textContent = '';
+        unavail.classList.remove('d-none');
+        return;
+    }
+    container.style.display = 'flex';
+    labelsEl.style.display  = 'flex';
+    unavail.classList.add('d-none');
+    renderChart(weekly.map(function(d) {
+        return { date: d.date, count: d.count === null ? 0 : d.count };
+    }));
+}
+
+/* --- Tableau --- */
+
+function renderTable(users) {
+    var tbody = document.getElementById('users-tbody');
+    tbody.textContent = '';
+
+    if (!users || users.length === 0) {
+        var tr = document.createElement('tr');
+        var td = document.createElement('td');
+        td.colSpan   = 5;
+        td.className = 'text-center text-muted py-3';
+        td.textContent = "Aucun utilisateur detecte aujourd'hui.";
+        tr.appendChild(td);
+        tbody.appendChild(tr);
+        return;
+    }
+
+    users.forEach(function(u) {
+        var sc = STATUS_CONFIG[u.status] || { badge: 'bg-secondary', label: (u.status || '').toUpperCase() };
+        var tr = document.createElement('tr');
+
+        /* Utilisateur */
+        var tdUser = document.createElement('td');
+        var strong = document.createElement('strong');
+        strong.textContent = u.login || '';
+        tdUser.appendChild(strong);
+        tr.appendChild(tdUser);
+
+        /* Statut */
+        var tdStatus = document.createElement('td');
+        var badge    = document.createElement('span');
+        badge.className   = 'badge ' + sc.badge;
+        badge.textContent = sc.label;
+        tdStatus.appendChild(badge);
+        tr.appendChild(tdStatus);
+
+        /* Derniere action */
+        var tdAction = document.createElement('td');
+        tdAction.textContent = u.last_action_time || '\u2014';
+        if (u.last_action_label) {
+            var br    = document.createElement('br');
+            var small = document.createElement('small');
+            small.className   = 'text-muted';
+            small.textContent = u.last_action_label;
+            tdAction.appendChild(br);
+            tdAction.appendChild(small);
+        }
+        tr.appendChild(tdAction);
+
+        /* Actions 24h */
+        var tdCount = document.createElement('td');
+        tdCount.textContent = String(u.action_count_24h || 0);
+        tr.appendChild(tdCount);
+
+        /* Depuis */
+        var tdSince = document.createElement('td');
+        tdSince.textContent = u.connected_since || '\u2014';
+        tr.appendChild(tdSince);
+
+        tbody.appendChild(tr);
+    });
+}
+
+/* --- Alertes --- */
+
+function showAlert(type, message) {
+    var zone = document.getElementById('alert-zone');
+    zone.textContent = '';
+    var div  = document.createElement('div');
+    div.className = 'alert alert-' + type;
+    var icon = document.createElement('i');
+    icon.className = 'bi bi-exclamation-triangle me-1';
+    div.appendChild(icon);
+    div.appendChild(document.createTextNode(message));
+    zone.appendChild(div);
+}
+
+function clearAlert() {
+    document.getElementById('alert-zone').textContent = '';
+}
+
+/* --- Refresh --- */
+
+function refreshUsers() {
+    fetch('/api/users')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            if (data.error) {
+                showAlert('warning', data.error);
+                renderTable([]);
+                renderChart([]);
+                return;
+            }
+            if (data.no_files) {
+                showAlert('info', "Aucun log disponible pour aujourd'hui.");
+                renderTable([]);
+                renderChart([]);
+                return;
+            }
+            clearAlert();
+            renderTable(data.users || []);
+            currentHourly = data.hourly || [];
+            if (currentPeriod === 'today') {
+                renderChart(currentHourly);
+            }
+            document.getElementById('last-update').textContent =
+                'Mis a jour : ' + new Date().toLocaleTimeString('fr-FR');
+        })
+        .catch(function() {});
+}
+
+document.getElementById('period-select').addEventListener('change', function() {
+    currentPeriod = this.value;
+    if (currentPeriod === 'today') {
+        document.getElementById('chart-container').style.display = 'flex';
+        document.getElementById('chart-labels').style.display    = 'flex';
+        document.getElementById('chart-unavailable').classList.add('d-none');
+        renderChart(currentHourly);
+    } else {
+        fetch('/api/users/activity/weekly')
+            .then(function(r) { return r.json(); })
+            .then(function(data) { renderWeekly(data.weekly || []); })
+            .catch(function() {});
+    }
+});
+
+refreshUsers();
+setInterval(refreshUsers, 30000);
+</script>
+{% endblock %}