From 6df37d15c14a857a7723b525224ba19bdcc44e09 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 20 Apr 2026 12:11:11 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20version=20mobile=20=C3=A9cran=20Util?=
 =?UTF-8?q?isateurs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tableau desktop masqué sous 1024px, remplacé par des cards
cliquables avec username, badge statut, employé lié, accès et sites.
Titre et bouton ajouter adaptés pour mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/pages/users.vue | 45 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index 2757209..de052c4 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex items-center justify-between pb-6">
-      <h1 class="text-4xl font-bold text-primary-500">Utilisateurs</h1>
+      <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Utilisateurs</h1>
       <button
         type="button"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        class="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-secondary-500 lg:px-4 lg:text-md"
         @click="openCreate"
       >
-        + Ajouter un utilisateur
+        + Ajouter
       </button>
     </div>
 
@@ -18,7 +18,8 @@
       Aucun utilisateur pour le moment.
     </div>
 
-    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+    <!-- Desktop table -->
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white hidden lg:block">
       <div class="grid grid-cols-5 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
         <span class="text-left">Utilisateur</span>
         <span class="text-left">Employé</span>
@@ -56,6 +57,42 @@
       </div>
     </div>
 
+    <!-- Mobile cards -->
+    <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500 lg:hidden">
+      Chargement...
+    </div>
+    <div v-else-if="users.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
+      <div
+        v-for="user in users"
+        :key="'m-' + user.id"
+        class="rounded-md border border-primary-500 bg-white p-4 cursor-pointer active:bg-tertiary-500"
+        @click="openEdit(user)"
+      >
+        <div class="flex items-center justify-between gap-2 mb-2">
+          <p class="text-md font-bold text-primary-500 truncate">{{ user.username }}</p>
+          <span
+            v-if="user.isLocked"
+            class="shrink-0 inline-block rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700"
+          >Verrouillé</span>
+          <span
+            v-else
+            class="shrink-0 inline-block rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700"
+          >Actif</span>
+        </div>
+        <div class="space-y-1 text-sm">
+          <p v-if="user.employee" class="text-neutral-600">
+            {{ user.employee.firstName }} {{ user.employee.lastName }}
+          </p>
+          <p class="text-neutral-500">
+            Accès : <span class="font-semibold text-primary-500">{{ getAccessLabel(user) }}</span>
+          </p>
+          <p v-if="getSiteLabels(user) !== '-'" class="text-neutral-500 truncate">
+            Sites : <span class="font-semibold text-primary-500">{{ getSiteLabels(user) }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+
     <AppDrawer
       v-model="isDrawerOpen"
       :title="editingUser ? 'Modifier un utilisateur' : 'Ajouter un utilisateur'"