{# ------------------- 3️⃣ Commandes ------------------- #}
<div class="tab-pane fade" id="tabCommandes">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group graph-menu" id="graphMenuCommandes">

                <a href="#" class="list-group-item list-group-item-action active d-flex justify-content-between align-items-center" data-bs-target="#graphCmdRegion">
                    <span><i class="fa fa-map-marker-alt text-primary me-2"></i> Par région</span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left" title="Répartition géographique des commandes.<br>• Toutes les commandes sont prises en compte, sauf les commandes annulées.<br>• Permet d’identifier les régions les plus actives ou sous-exploitées."></i>

                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphCmdSource">
                    <span><i class="fa fa-bullhorn text-success me-2"></i> Par source</span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Analyse des sources d’acquisition de commandes (ex. téléphone, site web, réseaux sociaux, etc.). Permet d’optimiser les canaux marketing."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphCmdStatut">
                    <span><i class="fa fa-tasks text-warning me-2"></i> Par statut</span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Répartition des commandes par statut (En attente, Accepté, Expédié, etc.). Aide à visualiser l’état global du flux de commandes."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphCmdParUserInterne">
                    <span><i class="fa fa-user-tie text-info me-2"></i> Par utilisateur interne</span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Répartition des commandes par utilisateur interne (créateur/saisie). Permet d’analyser la charge et la performance opérationnelle par membre de l’équipe, sur la période sélectionnée."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphTauxAnnulation">
                    <span><i class="fa fa-percentage text-primary me-2"></i> Taux d’annulation </span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Vue combinée : part des commandes annulées sur la période. Permet d’évaluer la qualité de service et la satisfaction client."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphTauxRetourEvolution">
                    <span><i class="fa fa-undo text-danger me-2"></i> Taux de retour </span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Part des commandes retournées dans le temps (Retourné + Retour en cours), rapportée aux commandes non annulées."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphTauxEchangeEvolution">
                    <span><i class="fa fa-exchange-alt text-info me-2"></i> Taux d’échanges </span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Part des commandes échangées (Échange + Échange en cours) au fil du temps, rapportée aux commandes non annulées."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphDelaisTraitement">
                    <span><i class="fa fa-clock text-warning me-2"></i> Délais moyens de traitement</span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Temps moyen entre la création et la validation des commandes (statut Expédié). Permet d’évaluer la réactivité interne."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphMotifAnnulation">
                    <span><i class="fa fa-times-circle text-danger me-2"></i> Annulations par motif</span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Répartition des commandes annulées par motif (ex. client, rupture de stock, erreur de prix, délai). Aide à prioriser les actions correctives."></i>
                </a>

                <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-bs-target="#graphMotifRetour">
                    <span><i class="fa fa-undo text-warning me-2"></i> Retours par motif</span>
                    <i class="fa fa-info-circle text-secondary" data-bs-toggle="tooltip" data-placement="left"
                    title="Répartition des retours par motif (ex. client injoignable, refus, indisponible, etc.). Utile pour piloter la qualité produit et la logistique."></i>
                </a>

            </div>
        </div>

        <div class="col-md-9">
            <div id="graphContainerCommandes">
                {# 3.1. Par région/ville (Commandes) #}
                <div id="graphCmdRegion" class="graph-block">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                            <div class="small">
                                <i class="fa fa-info-circle me-1"></i>
                                Répartition géographique des commandes. <b>Les annulées sont exclues</b>. Identifie les régions actives ou sous-exploitées.
                            </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodCmdRegion" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Métrique — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label class="mb-0 me-2" for="metricCmdRegion">Données</label>
                            <select id="metricCmdRegion" class="form-control form-control-sm w-auto no-select2">
                            <option value="orders" selected>Nb commandes</option>
                            <option value="ca">Total vente (CA)</option>
                            <option value="margin">Total marge</option>
                            <option value="ca_margin">Vente + Marge (empilé)</option>
                            </select>
                        </div>

                        {# Top — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label class="mb-0 me-2" for="limitCmdRegion">Top</label>
                            <select id="limitCmdRegion" class="form-control form-control-sm w-auto no-select2">
                            <option value="0" selected>Tous</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                            </select>
                        </div>

                        {# Pousse les contrôles de droite #}
                        <div class="ms-auto"></div>

                        {# HT/TTC — droite (pertinent pour CA / marge / empilé) #}
                        <div class="mb-2 d-inline-flex align-items-center graph-basis-right" title="Base de calcul (Montant)">
                            <div id="basisCmdRegion" class="btn-group btn-group-sm btn-group-toggle special-basis" data-bs-toggle="buttons">
                            <label class="btn btn-outline-dark active" data-value="ht" id="basisCmdRegionHT">
                                <input type="radio" autocomplete="off" checked> HT
                            </label>
                            <label class="btn btn-outline-dark" data-value="ttc" id="basisCmdRegionTTC">
                                <input type="radio" autocomplete="off"> TTC
                            </label>
                            </div>
                        </div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeCmdRegion" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc Personnalisée #}
                        <div id="customCmdRegionWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeCmdRegion" class="me-2 mb-0">Mode</label>
                            <select id="modeCmdRegion" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeCmdRegionGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startCmdRegionYear" class="me-2 mb-0">De</label>
                            <select id="startCmdRegionYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endCmdRegionYear" class="me-2 mb-0">À</label>
                            <select id="endCmdRegionYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisCmdRegionGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleCmdRegionYear" class="me-2 mb-0">Année</label>
                            <select id="singleCmdRegionYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeCmdRegionGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateCmdRegion" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateCmdRegion" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateCmdRegion" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateCmdRegion" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartCmdRegion"></canvas>
                        </div>

                    </div>
                </div>


                {# 3.2. Par Source de commande #}
                <div id="graphCmdSource" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Répartition des commandes par <b>source d’acquisition</b> (site, réseaux, commercial, etc.).
                            <b>Les annulées sont exclues</b>. Repère les canaux performants ou à développer.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodCmdSource" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Métrique — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center" title="Données">
                            <label class="mb-0 me-2" for="metricCmdSource">Données</label>
                            <select id="metricCmdSource" class="form-control form-control-sm w-auto no-select2">
                            <option value="orders" selected>Nb Commandes</option>
                            <option value="ca">Total vente (CA)</option>
                            <option value="margin">Total marge</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# HT/TTC — droite (actif si CA/Marge) #}
                        <div class="mb-2 d-inline-flex align-items-center graph-basis-right" id="basisBlockCmdSource" title="Base de calcul">
                            <div id="basisCmdSource" class="btn-group btn-group-sm btn-group-toggle special-basis" data-bs-toggle="buttons">
                            <label class="btn btn-outline-dark active" data-value="ht" id="basisCmdSourceHT">
                                <input type="radio" autocomplete="off" checked> HT
                            </label>
                            <label class="btn btn-outline-dark" data-value="ttc" id="basisCmdSourceTTC">
                                <input type="radio" autocomplete="off"> TTC
                            </label>
                            </div>
                        </div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeCmdSource" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="doughnut">Secteur</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Mode personnalisé #}
                        <div id="customCmdSourceWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeCmdSource" class="me-2 mb-0">Mode</label>
                            <select id="modeCmdSource" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeCmdSourceGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startCmdSourceYear" class="me-2 mb-0">De</label>
                            <select id="startCmdSourceYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endCmdSourceYear" class="me-2 mb-0">À</label>
                            <select id="endCmdSourceYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisCmdSourceGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleCmdSourceYear" class="me-2 mb-0">Année</label>
                            <select id="singleCmdSourceYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeCmdSourceGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateCmdSource" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateCmdSource" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateCmdSource" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateCmdSource" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartCmdSource"></canvas>
                        </div>

                    </div>
                </div>



                {# 3.3 Par statut #}
                <div id="graphCmdStatut" class="graph-block">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Répartition des commandes par <b>statut</b>. Choix de la métrique : <b>Nb</b>, <b>CA</b>, <b>Marge</b>.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodCmdStatut" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Métrique — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center" title="Données">
                            <label class="mb-0 me-2" for="metricCmdStatut">Données</label>
                            <select id="metricCmdStatut" class="form-control form-control-sm w-auto no-select2">
                            <option value="orders" selected>Nb Commandes</option>
                            <option value="ca">Total vente (CA)</option>
                            <option value="margin">Total marge</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# HT/TTC — droite (pertinent si CA/Marge) #}
                        <div class="mb-2 d-inline-flex align-items-center graph-basis-right" id="basisBlockCmdStatut" title="Base de calcul">
                            <div id="basisCmdStatut" class="btn-group btn-group-sm btn-group-toggle special-basis" data-bs-toggle="buttons">
                            <label class="btn btn-outline-dark active" data-value="ht" id="basisCmdStatutHT">
                                <input type="radio" autocomplete="off" checked> HT
                            </label>
                            <label class="btn btn-outline-dark" data-value="ttc" id="basisCmdStatutTTC">
                                <input type="radio" autocomplete="off"> TTC
                            </label>
                            </div>
                        </div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeCmdStatut" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="doughnut">Secteur</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Mode personnalisé #}
                        <div id="customCmdStatutWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeCmdStatut" class="me-2 mb-0">Mode</label>
                            <select id="modeCmdStatut" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeCmdStatutGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startCmdStatutYear" class="me-2 mb-0">De</label>
                            <select id="startCmdStatutYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endCmdStatutYear" class="me-2 mb-0">À</label>
                            <select id="endCmdStatutYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisCmdStatutGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleCmdStatutYear" class="me-2 mb-0">Année</label>
                            <select id="singleCmdStatutYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeCmdStatutGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateCmdStatut" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateCmdStatut" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateCmdStatut" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateCmdStatut" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartCmdStatut"></canvas>
                        </div>

                    </div>
                </div>


                {# 3.4. Par utilisateur interne (avec filtres complets, stack bar, base HT/TTC) #}
                <div id="graphCmdParUserInterne" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Performance par <b>utilisateur interne</b>. Métrique : <b>Nb</b>, <b>CA</b>, <b>Marge</b>, ou <b>CA+Marge</b> (empilé).
                            Base <b>HT/TTC</b> ajustable. Par défaut <em>Cette année</em>.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodCmdUserInterne" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Métrique — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center" title="Données">
                            <label class="mb-0 me-2" for="metricCmdUserInterne">Données</label>
                            <select id="metricCmdUserInterne" class="form-control form-control-sm w-auto no-select2">
                            <option value="orders" selected>Nb Commandes (empilé)</option>
                            <option value="ca">Chiffre d’affaires</option>
                            <option value="margin">Marge</option>
                            <option value="ca_margin">CA + Marge (empilé)</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# HT/TTC — droite #}
                        <div class="mb-2 d-inline-flex align-items-center graph-basis-right" title="Base de calcul">
                            <div id="basisCmdUserInterne" class="btn-group btn-group-sm btn-group-toggle special-basis" data-bs-toggle="buttons">
                            <label class="btn btn-outline-dark active" data-value="ht" id="basisCmdUserInterneHT">
                                <input type="radio" autocomplete="off" checked> HT
                            </label>
                            <label class="btn btn-outline-dark" data-value="ttc" id="basisCmdUserInterneTTC">
                                <input type="radio" autocomplete="off"> TTC
                            </label>
                            </div>
                        </div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeCmdUserInterne" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="doughnut">Secteur</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Mode personnalisé #}
                        <div id="customCmdUserInterneWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeCmdUserInterne" class="me-2 mb-0">Mode</label>
                            <select id="modeCmdUserInterne" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeCmdUserInterneGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startCmdUserInterneYear" class="me-2 mb-0">De</label>
                            <select id="startCmdUserInterneYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endCmdUserInterneYear" class="me-2 mb-0">À</label>
                            <select id="endCmdUserInterneYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisCmdUserInterneGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleCmdUserInterneYear" class="me-2 mb-0">Année</label>
                            <select id="singleCmdUserInterneYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeCmdUserInterneGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateCmdUserInterne" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateCmdUserInterne" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateCmdUserInterne" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateCmdUserInterne" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartCmdParUserInterne"></canvas>
                        </div>

                    </div>
                </div>



               {# 3.5. Taux d’annulation (évolution) #}
                <div id="graphTauxAnnulation" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Évolution du <b>taux d’annulation</b> = commandes <em>annulées</em> / commandes <em>totales</em> sur la période.
                            Par défaut <em>Cette année</em>. Agrégation adaptable (année/mois/période).
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodTauxAnnulation" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeTauxAnnulation" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc période personnalisée #}
                        <div id="customTauxAnnulationWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeTauxAnnulation" class="me-2 mb-0">Mode</label>
                            <select id="modeTauxAnnulation" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeTauxAnnulationGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startTauxAnnulationYear" class="me-2 mb-0">De</label>
                            <select id="startTauxAnnulationYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endTauxAnnulationYear" class="me-2 mb-0">À</label>
                            <select id="endTauxAnnulationYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisTauxAnnulationGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleTauxAnnulationYear" class="me-2 mb-0">Année</label>
                            <select id="singleTauxAnnulationYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeTauxAnnulationGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateTauxAnnulation" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateTauxAnnulation" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateTauxAnnulation" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateTauxAnnulation" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartTauxAnnulation"></canvas>
                        </div>

                    </div>
                </div>


                {# 3.6. Taux de retour (évolution) #}
                <div id="graphTauxRetourEvolution" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Évolution du <b>taux de retour</b> = commandes <em>retournées</em> / commandes <em>expédiées</em> sur la période.
                            Par défaut <em>Cette année</em>. Agrégation (année/mois/période) disponible.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodTauxRetour" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeTauxRetour" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc période personnalisée #}
                        <div id="customTauxRetourWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeTauxRetour" class="me-2 mb-0">Mode</label>
                            <select id="modeTauxRetour" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeTauxRetourGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startTauxRetourYear" class="me-2 mb-0">De</label>
                            <select id="startTauxRetourYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endTauxRetourYear" class="me-2 mb-0">À</label>
                            <select id="endTauxRetourYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisTauxRetourGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleTauxRetourYear" class="me-2 mb-0">Année</label>
                            <select id="singleTauxRetourYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeTauxRetourGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateTauxRetour" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateTauxRetour" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateTauxRetour" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateTauxRetour" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartTauxRetour"></canvas>
                        </div>

                    </div>
                </div>



               {# 3.7. Taux d'échanges (évolution) #}
                <div id="graphTauxEchangeEvolution" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Évolution du <b>taux d’échange</b> = commandes <em>échangées</em> / commandes <em>expédiées</em> selon la période. Par défaut <em>Cette année</em>.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodTauxEchange" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeTauxEchange" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc période personnalisée (année/mois/période) #}
                        <div id="customTauxEchangeWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeTauxEchange" class="me-2 mb-0">Mode</label>
                            <select id="modeTauxEchange" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeTauxEchangeGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startTauxEchangeYear" class="me-2 mb-0">De</label>
                            <select id="startTauxEchangeYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endTauxEchangeYear" class="me-2 mb-0">À</label>
                            <select id="endTauxEchangeYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisTauxEchangeGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleTauxEchangeYear" class="me-2 mb-0">Année</label>
                            <select id="singleTauxEchangeYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeTauxEchangeGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateTauxEchange" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateTauxEchange" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateTauxEchange" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateTauxEchange" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartTauxEchange"></canvas>
                        </div>

                    </div>
                </div>


               {# 3.8. Délais moyens de traitement #}
                <div id="graphDelaisTraitement" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Suivi des <b>délais moyens</b> entre étapes clés (ex. création → expédition → livraison) selon la période.
                            Par défaut <em>Cette année</em>.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodDelaisTraitement" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeDelaisTraitement" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="line">Courbe</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc période personnalisée (année/mois/période) #}
                        <div id="customDelaisTraitementWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeDelaisTraitement" class="me-2 mb-0">Mode</label>
                            <select id="modeDelaisTraitement" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeDelaisTraitementGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startDelaisTraitementYear" class="me-2 mb-0">De</label>
                            <select id="startDelaisTraitementYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endDelaisTraitementYear" class="me-2 mb-0">À</label>
                            <select id="endDelaisTraitementYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisDelaisTraitementGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleDelaisTraitementYear" class="me-2 mb-0">Année</label>
                            <select id="singleDelaisTraitementYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeDelaisTraitementGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateDelaisTraitement" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateDelaisTraitement" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateDelaisTraitement" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateDelaisTraitement" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartDelaisTraitement"></canvas>
                        </div>

                    </div>
                </div>



                {# 3.9. Annulations par motif #}
                <div id="graphMotifAnnulation" class="graph-block d-none">
                    <div class="card-body">

                        {# Notice d’info #}
                        <div class="info-hint mb-2">
                        <div class="small">
                            <i class="fa fa-info-circle me-1"></i>
                            Répartition des <b>annulations</b> par <b>motif</b> sur la période sélectionnée.
                            Utilise les commandes marquées <em>Annulée</em>. Par défaut <em>Cette année</em>.
                        </div>
                        </div>

                        {# Toolbar filtres #}
                        <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                        {# Période — gauche #}
                        <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                            <select id="quickPeriodMotifAnnulation" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                            <option value="all">Toute la période</option>
                            <option value="7days">7 derniers jours</option>
                            <option value="30days">30 derniers jours</option>
                            <option value="week">Cette semaine</option>
                            <option value="last_week">Semaine dernière</option>
                            <option value="month">Ce mois</option>
                            <option value="last_month">Mois dernier</option>
                            <option value="year" selected>Cette année</option>
                            <option value="last_year">Année dernière</option>
                            <option value="custom">Personnalisée</option>
                            </select>
                        </div>

                        {# Pousse à droite #}
                        <div class="ms-auto"></div>

                        {# Type — extrémité droite #}
                        <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                            <select id="chartTypeMotifAnnulation" class="form-control form-control-sm w-auto no-select2 type-select">
                            <option value="bar" selected>Barres</option>
                            <option value="doughnut">Secteur</option>
                            </select>
                        </div>
                        </div>

                        {# Séparateur #}
                        <div class="graph-divider"></div>

                        {# Bloc période personnalisée (année/mois/période) #}
                        <div id="customMotifAnnulationWrapper" class="w-100 d-none mt-2">
                        <div class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="modeMotifAnnulation" class="me-2 mb-0">Mode</label>
                            <select id="modeMotifAnnulation" class="form-control form-control-sm w-auto no-select2">
                            <option value="annee" selected>Par année</option>
                            <option value="mois">Par mois</option>
                            <option value="periode">Par période</option>
                            </select>
                        </div>

                        <div id="anneeMotifAnnulationGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                            <label for="startMotifAnnulationYear" class="me-2 mb-0">De</label>
                            <select id="startMotifAnnulationYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                            <label for="endMotifAnnulationYear" class="me-2 mb-0">À</label>
                            <select id="endMotifAnnulationYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="moisMotifAnnulationGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="singleMotifAnnulationYear" class="me-2 mb-0">Année</label>
                            <select id="singleMotifAnnulationYear" class="form-control form-control-sm w-auto no-select2"></select>
                        </div>

                        <div id="periodeMotifAnnulationGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                            <label for="startDateMotifAnnulation" class="me-2 mb-0">De</label>
                            <input type="date" id="startDateMotifAnnulation" class="form-control form-control-sm w-auto me-2">
                            <label for="endDateMotifAnnulation" class="me-2 mb-0">À</label>
                            <input type="date" id="endDateMotifAnnulation" class="form-control form-control-sm w-auto">
                        </div>
                        </div>

                        {# Graphique #}
                        <div style="height:420px;">
                        <canvas id="chartAnnulationParMotif"></canvas>
                        </div>

                    </div>
                </div>

              {# 3.10. Retours par motif #}
            <div id="graphMotifRetour" class="graph-block d-none">
                <div class="card-body">

                    {# Notice d’info #}
                    <div class="info-hint mb-2">
                    <div class="small">
                        <i class="fa fa-info-circle me-1"></i>
                        Répartition des <b>retours</b> par <b>motif</b> sur la période sélectionnée. Par défaut <em>Cette année</em>.
                    </div>
                    </div>

                    {# Toolbar filtres #}
                    <div class="graph-toolbar d-flex flex-wrap align-items-start w-100 mb-3">

                    {# Période — gauche #}
                    <div class="me-3 mb-2 d-inline-flex align-items-center graph-period-left order-first" title="Période">
                        <select id="quickPeriodRetourParMotif" class="form-control form-control-sm w-auto no-select2 period-with-icon">
                        <option value="all">Toute la période</option>
                        <option value="7days">7 derniers jours</option>
                        <option value="30days">30 derniers jours</option>
                        <option value="week">Cette semaine</option>
                        <option value="last_week">Semaine dernière</option>
                        <option value="month">Ce mois</option>
                        <option value="last_month">Mois dernier</option>
                        <option value="year" selected>Cette année</option>
                        <option value="last_year">Année dernière</option>
                        <option value="custom">Personnalisée</option>
                        </select>
                    </div>

                    {# Pousse à droite #}
                    <div class="ms-auto"></div>

                    {# Type — extrémité droite #}
                    <div class="ms-2 mb-2 d-inline-flex align-items-center graph-type-right" title="Type de graphique">
                        <select id="chartTypeRetourParMotif" class="form-control form-control-sm w-auto no-select2 type-select">
                        <option value="bar" selected>Barres</option>
                        <option value="doughnut">Secteur</option>
                        </select>
                    </div>
                    </div>

                    {# Séparateur #}
                    <div class="graph-divider"></div>

                    {# Bloc période personnalisée (année/mois/période) #}
                    <div id="customRetourParMotifWrapper" class="w-100 d-none mt-2">
                    <div class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="modeRetourParMotif" class="me-2 mb-0">Mode</label>
                        <select id="modeRetourParMotif" class="form-control form-control-sm w-auto no-select2">
                        <option value="annee" selected>Par année</option>
                        <option value="mois">Par mois</option>
                        <option value="periode">Par période</option>
                        </select>
                    </div>

                    <div id="anneeRetourParMotifGroup" class="me-3 mb-2 d-inline-flex align-items-center">
                        <label for="startRetourParMotifYear" class="me-2 mb-0">De</label>
                        <select id="startRetourParMotifYear" class="form-control form-control-sm w-auto me-2 no-select2"></select>
                        <label for="endRetourParMotifYear" class="me-2 mb-0">À</label>
                        <select id="endRetourParMotifYear" class="form-control form-control-sm w-auto no-select2"></select>
                    </div>

                    <div id="moisRetourParMotifGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                        <label for="singleRetourParMotifYear" class="me-2 mb-0">Année</label>
                        <select id="singleRetourParMotifYear" class="form-control form-control-sm w-auto no-select2"></select>
                    </div>

                    <div id="periodeRetourParMotifGroup" class="me-3 mb-2 d-none d-inline-flex align-items-center">
                        <label for="startDateRetourParMotif" class="me-2 mb-0">De</label>
                        <input type="date" id="startDateRetourParMotif" class="form-control form-control-sm w-auto me-2">
                        <label for="endDateRetourParMotif" class="me-2 mb-0">À</label>
                        <input type="date" id="endDateRetourParMotif" class="form-control form-control-sm w-auto">
                    </div>
                    </div>

                    {# Graphique #}
                    <div style="height:420px;">
                    <canvas id="chartRetourParMotif"></canvas>
                    </div>

                </div>
            </div>



            </div>
        </div>

    </div>
</div>