From 2093b9ca3a2cb807954aef2d62289791e4b8eeec Mon Sep 17 00:00:00 2001
From: belviskhoremk <belviskhoremk@gmail.com>
Date: Thu, 13 Aug 2026 09:39:52 +0200
Subject: [PATCH] style: apply shared admin design to
 Services/Schedule/Bookings/Inquiries pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the shared admin design system (adminShared.module.css) to the 4 remaining
legacy admin pages via CSS composition. All buttons in these 4 pages now use the
shared button classes (button, buttonSecondary, buttonDanger) for consistent styling.

- AdminServices: 3 buttons (Modifier, Supprimer, Enregistrer le service)
- AdminSchedule: 3 buttons (Enregistrer l'horaire, Retirer, Ajouter une exception)
- AdminBookings: 2 buttons (Annuler, Marquer comme terminée)
- AdminInquiries: 1 button (Marquer comme lue)

All tests pass unchanged (127 tests). No data-fetching or event-handler logic changed.

Claude-Session: https://claude.ai/code/session_01NhxA4npAXAxmCDEJt6kxSH
---
 src/pages/admin/AdminBookings.module.css  | 27 ++++++------
 src/pages/admin/AdminBookings.tsx         |  2 +
 src/pages/admin/AdminInquiries.module.css | 18 +++-----
 src/pages/admin/AdminInquiries.tsx        |  2 +-
 src/pages/admin/AdminSchedule.module.css  | 51 +++++++++++++----------
 src/pages/admin/AdminSchedule.tsx         |  6 +--
 src/pages/admin/AdminServices.module.css  | 42 ++++++-------------
 src/pages/admin/AdminServices.tsx         |  6 +--
 8 files changed, 71 insertions(+), 83 deletions(-)

diff --git a/src/pages/admin/AdminBookings.module.css b/src/pages/admin/AdminBookings.module.css
index d050b1d..e3aca43 100644
--- a/src/pages/admin/AdminBookings.module.css
+++ b/src/pages/admin/AdminBookings.module.css
@@ -1,23 +1,24 @@
 .page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
+  composes: page from './adminShared.module.css';
 }
 
 .table {
-  width: 100%;
-  border-collapse: collapse;
-  background: white;
+  composes: table from './adminShared.module.css';
 }
 
-.table th,
-.table td {
-  text-align: left;
-  padding: var(--space-sm);
-  border-bottom: 1px solid var(--color-cream-alt);
-  vertical-align: top;
+.button {
+  composes: button from './adminShared.module.css';
+}
+
+.buttonSecondary {
+  composes: buttonSecondary from './adminShared.module.css';
+  margin-right: var(--admin-space-xs);
+}
+
+.buttonDanger {
+  composes: buttonDanger from './adminShared.module.css';
 }
 
 .error {
-  color: #a33;
+  composes: error from './adminShared.module.css';
 }
diff --git a/src/pages/admin/AdminBookings.tsx b/src/pages/admin/AdminBookings.tsx
index 585bd1b..24031ff 100644
--- a/src/pages/admin/AdminBookings.tsx
+++ b/src/pages/admin/AdminBookings.tsx
@@ -93,6 +93,7 @@ function AdminBookings() {
                   <>
                     <button
                       type="button"
+                      className={styles.buttonDanger}
                       onClick={() => {
                         if (window.confirm('Annuler cette réservation ? Cela libérera son créneau pour d\'autres réservations.')) {
                           void setStatus(booking.id, 'cancelled')
@@ -103,6 +104,7 @@ function AdminBookings() {
                     </button>
                     <button
                       type="button"
+                      className={styles.buttonSecondary}
                       onClick={() => {
                         if (window.confirm('Marquer cette réservation comme terminée ?')) {
                           void setStatus(booking.id, 'completed')
diff --git a/src/pages/admin/AdminInquiries.module.css b/src/pages/admin/AdminInquiries.module.css
index d050b1d..42d4d5c 100644
--- a/src/pages/admin/AdminInquiries.module.css
+++ b/src/pages/admin/AdminInquiries.module.css
@@ -1,23 +1,15 @@
 .page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
+  composes: page from './adminShared.module.css';
 }
 
 .table {
-  width: 100%;
-  border-collapse: collapse;
-  background: white;
+  composes: table from './adminShared.module.css';
 }
 
-.table th,
-.table td {
-  text-align: left;
-  padding: var(--space-sm);
-  border-bottom: 1px solid var(--color-cream-alt);
-  vertical-align: top;
+.buttonSecondary {
+  composes: buttonSecondary from './adminShared.module.css';
 }
 
 .error {
-  color: #a33;
+  composes: error from './adminShared.module.css';
 }
diff --git a/src/pages/admin/AdminInquiries.tsx b/src/pages/admin/AdminInquiries.tsx
index 4aaeaad..2f81ebc 100644
--- a/src/pages/admin/AdminInquiries.tsx
+++ b/src/pages/admin/AdminInquiries.tsx
@@ -82,7 +82,7 @@ function AdminInquiries() {
               <td>{STATUS_LABELS[inquiry.status]}</td>
               <td>
                 {inquiry.status === 'new' && (
-                  <button type="button" onClick={() => markRead(inquiry.id)}>Marquer comme lue</button>
+                  <button type="button" className={styles.buttonSecondary} onClick={() => markRead(inquiry.id)}>Marquer comme lue</button>
                 )}
               </td>
             </tr>
diff --git a/src/pages/admin/AdminSchedule.module.css b/src/pages/admin/AdminSchedule.module.css
index caa2a15..e8f2188 100644
--- a/src/pages/admin/AdminSchedule.module.css
+++ b/src/pages/admin/AdminSchedule.module.css
@@ -1,55 +1,64 @@
 .page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xl);
+  composes: page from './adminShared.module.css';
 }
 
 .section {
-  background: white;
-  padding: var(--space-md);
+  composes: card from './adminShared.module.css';
+  padding: var(--admin-space-lg);
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: var(--admin-space-md);
   max-width: 480px;
 }
 
 .days {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-sm);
+  gap: var(--admin-space-sm);
 }
 
 .days label {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--admin-space-xs);
+  font-size: 0.875rem;
+  color: var(--admin-text);
 }
 
 .form label,
 .section label {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  color: var(--color-charcoal);
+  gap: var(--admin-space-xs);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--admin-text);
 }
 
-.form input {
-  padding: var(--space-sm);
-  border: 1px solid var(--color-gold);
+.form input,
+.section input {
+  padding: var(--admin-space-sm);
+  border: 1px solid var(--admin-border);
+  border-radius: calc(var(--admin-radius) / 2);
+  font: inherit;
 }
 
 .exceptionsTable {
-  width: 100%;
-  border-collapse: collapse;
+  composes: table from './adminShared.module.css';
 }
 
-.exceptionsTable th,
-.exceptionsTable td {
-  text-align: left;
-  padding: var(--space-sm);
-  border-bottom: 1px solid var(--color-cream-alt);
+.button {
+  composes: button from './adminShared.module.css';
+}
+
+.buttonSecondary {
+  composes: buttonSecondary from './adminShared.module.css';
+}
+
+.form {
+  composes: form from './adminShared.module.css';
 }
 
 .error {
-  color: #a33;
+  composes: error from './adminShared.module.css';
 }
diff --git a/src/pages/admin/AdminSchedule.tsx b/src/pages/admin/AdminSchedule.tsx
index 136e731..4d2afa9 100644
--- a/src/pages/admin/AdminSchedule.tsx
+++ b/src/pages/admin/AdminSchedule.tsx
@@ -163,7 +163,7 @@ function AdminSchedule() {
               onChange={(e) => setTemplate({ ...template, slot_minutes: Number(e.target.value) })}
             />
           </label>
-          <button type="submit" disabled={saving}>Enregistrer l&apos;horaire</button>
+          <button type="submit" className={styles.button} disabled={saving}>Enregistrer l&apos;horaire</button>
         </form>
       )}
 
@@ -185,7 +185,7 @@ function AdminSchedule() {
                 <td>{exception.closed ? 'Oui' : 'Non'}</td>
                 <td>{exception.note}</td>
                 <td>
-                  <button type="button" onClick={() => handleRemoveException(exception.date)}>Retirer</button>
+                  <button type="button" className={styles.buttonSecondary} onClick={() => handleRemoveException(exception.date)}>Retirer</button>
                 </td>
               </tr>
             ))}
@@ -219,7 +219,7 @@ function AdminSchedule() {
               onChange={(e) => setNewException((f) => ({ ...f, note: e.target.value }))}
             />
           </label>
-          <button type="submit">Ajouter une exception</button>
+          <button type="submit" className={styles.button}>Ajouter une exception</button>
         </form>
       </div>
 
diff --git a/src/pages/admin/AdminServices.module.css b/src/pages/admin/AdminServices.module.css
index a61768e..402c53a 100644
--- a/src/pages/admin/AdminServices.module.css
+++ b/src/pages/admin/AdminServices.module.css
@@ -1,44 +1,28 @@
 .page {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
+  composes: page from './adminShared.module.css';
 }
 
 .table {
-  width: 100%;
-  border-collapse: collapse;
-  background: white;
-}
-
-.table th,
-.table td {
-  text-align: left;
-  padding: var(--space-sm);
-  border-bottom: 1px solid var(--color-cream-alt);
+  composes: table from './adminShared.module.css';
 }
 
 .form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  max-width: 420px;
-  background: white;
-  padding: var(--space-md);
+  composes: form from './adminShared.module.css';
 }
 
-.form label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  color: var(--color-charcoal);
+.button {
+  composes: button from './adminShared.module.css';
 }
 
-.form input,
-.form textarea {
-  padding: var(--space-sm);
-  border: 1px solid var(--color-gold);
+.buttonSecondary {
+  composes: buttonSecondary from './adminShared.module.css';
+  margin-right: var(--admin-space-xs);
+}
+
+.buttonDanger {
+  composes: buttonDanger from './adminShared.module.css';
 }
 
 .error {
-  color: #a33;
+  composes: error from './adminShared.module.css';
 }
diff --git a/src/pages/admin/AdminServices.tsx b/src/pages/admin/AdminServices.tsx
index b14aea7..cd3d23b 100644
--- a/src/pages/admin/AdminServices.tsx
+++ b/src/pages/admin/AdminServices.tsx
@@ -103,8 +103,8 @@ function AdminServices() {
               <td>{service.duration_minutes}</td>
               <td>{service.price_from} $</td>
               <td>
-                <button type="button" onClick={() => setForm(service)}>Modifier</button>
-                <button type="button" onClick={() => handleDelete(service.id)}>Supprimer</button>
+                <button type="button" className={styles.buttonSecondary} onClick={() => setForm(service)}>Modifier</button>
+                <button type="button" className={styles.buttonDanger} onClick={() => handleDelete(service.id)}>Supprimer</button>
               </td>
             </tr>
           ))}
@@ -172,7 +172,7 @@ function AdminServices() {
           />
         </label>
         {error && <p className={styles.error}>{error}</p>}
-        <button type="submit" disabled={saving}>Enregistrer le service</button>
+        <button type="submit" className={styles.button} disabled={saving}>Enregistrer le service</button>
       </form>
     </div>
   )