feat: filtre par page, multi-courbes chart, tri alphabétique options

- Ajout filtre multiselect par page(s) dans le dashboard analytics
- Chart multi-courbes par page quand aucun filtre page sélectionné
- Options de pages indépendantes du filtre page (persistent à la sélection)
- Options de pages dépendantes du filtre utilisateur
- Tracking modal-file avec format "Projet / Label" dans dialog.js
- Tri alphabétique des options du filtre par page
- Fix user list 500 error (email string, client field check)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/site/plugins/analytics/src/components/AnalyticsDashboard.vue

@@ -28,6 +28,16 @@
           @input="onUserSelectionChange"
         />
       </div>
+      <div class="k-analytics-page-filter">
+        <k-multiselect-field
+          :options="pageOptions"
+          :value="selectedPages"
+          label="Filtrer par page(s)"
+          search="true"
+          name="page"
+          @input="onPageSelectionChange"
+        />
+      </div>
     </div>
 
     <div v-if="!hasData" class="k-analytics-empty">
@@ -81,6 +91,7 @@ import {
   CategoryScale,
   Filler,
   Tooltip,
+  Legend,
 } from 'chart.js';
 
 Chart.register(
@@ -90,9 +101,23 @@ Chart.register(
   LinearScale,
   CategoryScale,
   Filler,
-  Tooltip
+  Tooltip,
+  Legend
 );
 
+const CHART_COLORS = [
+  '#4271ae',
+  '#c82829',
+  '#8959a8',
+  '#4d9a0f',
+  '#f5871f',
+  '#3e999f',
+  '#718c00',
+  '#a3685a',
+  '#525252',
+  '#eab700',
+];
+
 export default {
   props: {
     analyticsData: {
@@ -109,6 +134,7 @@ export default {
       chart: null,
       users: [],
       selectedEmails: [],
+      selectedPages: [],
     };
   },
 
@@ -123,6 +149,12 @@ export default {
     userOptions() {
       return this.users.map((u) => ({ value: u.email, text: u.label }));
     },
+    pageOptions() {
+      if (!this.data?.visitsByPage) return [];
+      return Object.keys(this.data.visitsByPage)
+        .map((p) => ({ value: p, text: p }))
+        .sort((a, b) => a.text.localeCompare(b.text));
+    },
   },
 
   watch: {
@@ -156,6 +188,11 @@ export default {
       this.fetchData();
     },
 
+    onPageSelectionChange(pages) {
+      this.selectedPages = pages;
+      this.fetchData();
+    },
+
     async fetchData() {
       const params = new URLSearchParams();
       if (this.startDate) params.set('startDate', this.startDate);
@@ -163,6 +200,9 @@ export default {
       if (this.selectedEmails.length) {
         params.set('emails', this.selectedEmails.join(','));
       }
+      if (this.selectedPages.length) {
+        params.set('pageNames', this.selectedPages.join(','));
+      }
 
       try {
         const response = await fetch(`/analytics-data.json?${params}`);
@@ -203,32 +243,58 @@ export default {
       const canvas = this.$refs.chartCanvas;
       if (!canvas || !this.data?.visitsByDay) return;
 
-      const labels = Object.keys(this.data.visitsByDay).map((d) =>
-        this.formatDateFR(d)
-      );
-      const values = Object.values(this.data.visitsByDay);
+      const allDays = Object.keys(this.data.visitsByDay);
+      if (!allDays.length) return;
 
-      if (!labels.length) return;
+      const labels = allDays.map((d) => this.formatDateFR(d));
+      const showPerPage =
+        this.selectedPages.length === 0 && this.data.visitsByDayByPage;
 
-      const maxValue = Math.max(...values);
+      let datasets;
+      let maxValue;
+
+      if (showPerPage) {
+        const pages = Object.keys(this.data.visitsByDayByPage);
+        datasets = pages.map((page, i) => {
+          const color = CHART_COLORS[i % CHART_COLORS.length];
+          const values = allDays.map(
+            (day) => this.data.visitsByDayByPage[page]?.[day] || 0
+          );
+          return {
+            label: page,
+            data: values,
+            borderColor: color,
+            backgroundColor: 'transparent',
+            fill: false,
+            tension: 0.3,
+            pointRadius: 2,
+            pointHoverRadius: 4,
+            borderWidth: 2,
+          };
+        });
+        maxValue = Math.max(
+          ...datasets.flatMap((ds) => ds.data)
+        );
+      } else {
+        const values = Object.values(this.data.visitsByDay);
+        datasets = [
+          {
+            label: 'Visites',
+            data: values,
+            borderColor: '#4271ae',
+            backgroundColor: 'rgba(66, 113, 174, 0.1)',
+            fill: true,
+            tension: 0.3,
+            pointRadius: 3,
+            pointHoverRadius: 5,
+          },
+        ];
+        maxValue = Math.max(...values);
+      }
 
       this.chart = new Chart(canvas, {
         type: 'line',
-        data: {
-          labels,
-          datasets: [
-            {
-              label: 'Visites',
-              data: values,
-              borderColor: '#4271ae',
-              backgroundColor: 'rgba(66, 113, 174, 0.1)',
-              fill: true,
-              tension: 0.3,
-              pointRadius: 3,
-              pointHoverRadius: 5,
-            },
-          ],
-        },
+        data: { labels, datasets },
         options: {
           responsive: true,
           maintainAspectRatio: false,
@@ -237,6 +303,11 @@ export default {
               mode: 'index',
               intersect: false,
             },
+            legend: {
+              display: showPerPage,
+              position: 'bottom',
+              labels: { boxWidth: 12, padding: 12 },
+            },
           },
           scales: {
             y: {
@@ -300,10 +371,20 @@ export default {
   margin-left: 2rem;
 }
 
-.k-field-name-user {
+.k-field-name-user,
+.k-field-name-page {
   min-width: 15rem;
 }
 
+.k-analytics-page-filter {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-light);
+  margin-left: 2rem;
+}
+
 .k-analytics-card {
   background: var(--color-background);
   border-radius: var(--rounded);