From 269f660ddfbb46a36398090e52ab74eea5a33e03 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 20 Apr 2026 11:03:20 +0200
Subject: [PATCH] =?UTF-8?q?feat=20:=20version=20mobile=20=C3=A9cran=20r?=
 =?UTF-8?q?=C3=A9cap=20cong=C3=A9s=20+=20croix=20sidebar=20bleue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Récap congés : tableau desktop masqué sous 1024px, remplacé par
des cards empilées (nom, site, contrat, grille 2x2 des compteurs).
Titre responsive (text-2xl mobile, text-4xl desktop).
Croix de fermeture sidebar en bleu primary.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/layouts/default.vue   |  2 +-
 frontend/pages/leave-recap.vue | 46 ++++++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index b3797fd..cd05d9c 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -28,7 +28,7 @@
                     <img src="/malio.png" alt="Logo" class="w-auto"/>
                     <button
                         type="button"
-                        class="mr-3 rounded-md p-1 text-neutral-500 hover:text-primary-500 lg:hidden"
+                        class="mr-3 rounded-md p-1 text-primary-500 hover:text-secondary-500 lg:hidden"
                         @click="sidebarOpen = false"
                     >
                         <Icon name="mdi:close" size="24"/>
diff --git a/frontend/pages/leave-recap.vue b/frontend/pages/leave-recap.vue
index 83a3f3d..2ed16a4 100644
--- a/frontend/pages/leave-recap.vue
+++ b/frontend/pages/leave-recap.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex flex-wrap items-center justify-between gap-4 pb-8">
-      <h1 class="text-4xl font-bold text-primary-500">Récap. congés</h1>
+      <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Récap. congés</h1>
       <span
         v-if="cutoffLabel"
         class="inline-flex items-center gap-2 rounded-full bg-tertiary-500 px-4 py-1 text-sm font-semibold text-primary-500"
@@ -25,7 +25,8 @@
       Aucun employé à afficher.
     </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 ${gridColsClass} 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`"
       >
@@ -64,6 +65,47 @@
         </div>
       </div>
     </div>
+
+    <!-- Mobile cards -->
+    <div v-if="!isLoading && rows.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
+      <div
+        v-for="row in rows"
+        :key="'m-' + row.employeeId"
+        class="rounded-md border border-primary-500 bg-white p-4"
+      >
+        <div class="mb-3 flex items-center justify-between gap-2">
+          <p class="text-md font-bold text-primary-500 truncate">
+            {{ row.lastName }} {{ row.firstName }}
+          </p>
+          <span
+            v-if="showSiteColumn && row.siteName"
+            class="inline-block shrink-0 rounded-full px-3 py-1 text-sm"
+            :style="{ backgroundColor: row.siteColor || '#ffd7d7', color: '#1a1a1a' }"
+          >
+            {{ row.siteName }}
+          </span>
+        </div>
+        <p v-if="row.contractName" class="mb-3 text-sm text-neutral-600">{{ row.contractName }}</p>
+        <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+          <div class="flex justify-between">
+            <span class="text-neutral-500">CP N-1</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN1Remaining) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">Samedis</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ row.acquiredSaturdays }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">CP N</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">RTT</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ row.rtt }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>