feat(vue-ensemble) : tri alphabétique des machines par défaut + select de tri (nom/date) + harmonisation tailles des champs de filtre

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/app/pages/index.vue

@@ -58,7 +58,26 @@
                 </option>
               </select>
             </div>
-            <div class="form-control">
+            <div class="form-control md:w-52">
+              <label class="label">
+                <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Trier par</span>
+              </label>
+              <select v-model="sortOrder" class="select select-bordered w-full">
+                <option value="name-asc">
+                  Nom (A → Z)
+                </option>
+                <option value="name-desc">
+                  Nom (Z → A)
+                </option>
+                <option value="date-desc">
+                  Plus récentes
+                </option>
+                <option value="date-asc">
+                  Plus anciennes
+                </option>
+              </select>
+            </div>
+            <div class="form-control md:w-80">
               <label class="label">
                 <span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Date de création</span>
               </label>
@@ -66,13 +85,13 @@
                 <input
                   v-model="dateFrom"
                   type="date"
-                  class="input input-bordered input-sm"
+                  class="input input-bordered w-full"
                 >
                 <span class="text-xs text-base-content/50">à</span>
                 <input
                   v-model="dateTo"
                   type="date"
-                  class="input input-bordered input-sm"
+                  class="input input-bordered w-full"
                 >
               </div>
             </div>
@@ -295,6 +314,7 @@ const showAddSiteModal = ref(false)
 const showAddMachineModal = ref(false)
 const searchTerm = ref('')
 const selectedSiteFilter = ref('')
+const sortOrder = ref('name-asc')
 const dateFrom = ref('')
 const dateTo = ref('')
 const collapsedSites = ref([])
@@ -318,10 +338,33 @@ const machinesBySiteId = computed(() => {
   return map
 })
 
+const sortMachines = (machineList) => {
+  const list = [...machineList]
+  switch (sortOrder.value) {
+    case 'name-desc':
+      return list.sort((a, b) =>
+        (b.name || '').localeCompare(a.name || '', 'fr', { sensitivity: 'base', numeric: true })
+      )
+    case 'date-desc':
+      return list.sort((a, b) =>
+        new Date(b.createdAt || 0) - new Date(a.createdAt || 0)
+      )
+    case 'date-asc':
+      return list.sort((a, b) =>
+        new Date(a.createdAt || 0) - new Date(b.createdAt || 0)
+      )
+    case 'name-asc':
+    default:
+      return list.sort((a, b) =>
+        (a.name || '').localeCompare(b.name || '', 'fr', { sensitivity: 'base', numeric: true })
+      )
+  }
+}
+
 const sitesWithMachines = computed(() => {
   return sites.value.map((site) => ({
     ...site,
-    machines: machinesBySiteId.value.get(site.id) || []
+    machines: sortMachines(machinesBySiteId.value.get(site.id) || [])
   }))
 })