From e459da7c2033961cc01bc55e1559430052027599 Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Mon, 2 Mar 2026 09:51:29 +0100
Subject: [PATCH] fix(ui) : replace checkbox with toggle switch for boolean
 custom fields

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/components/CustomFieldsDisplay.vue     |  8 ++++----
 app/components/machine/MachineInfoCard.vue | 11 +++++------
 app/pages/component/[id]/edit.vue          |  8 ++++----
 app/pages/component/create.vue             |  8 ++++----
 app/pages/pieces/[id]/edit.vue             |  8 ++++----
 app/pages/pieces/create.vue                |  8 ++++----
 app/pages/product/[id]/edit.vue            |  8 ++++----
 app/pages/product/create.vue               |  8 ++++----
 8 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/app/components/CustomFieldsDisplay.vue b/app/components/CustomFieldsDisplay.vue
index 4d633ea..c40b17c 100644
--- a/app/components/CustomFieldsDisplay.vue
+++ b/app/components/CustomFieldsDisplay.vue
@@ -55,16 +55,16 @@
         </select>
 
         <!-- Champ de type BOOLEAN -->
-        <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+        <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
           <input
             v-model="fieldValues[field.id]"
             type="checkbox"
-            class="checkbox checkbox-sm"
+            class="toggle toggle-primary toggle-sm"
             :checked="fieldValues[field.id] === 'true'"
             @change="updateCustomFieldValue(field.id)"
           >
-          <span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
-        </div>
+          <span class="text-sm" :class="fieldValues[field.id] === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
+        </label>
 
         <!-- Champ de type DATE -->
         <input
diff --git a/app/components/machine/MachineInfoCard.vue b/app/components/machine/MachineInfoCard.vue
index a376cb7..8606bc8 100644
--- a/app/components/machine/MachineInfoCard.vue
+++ b/app/components/machine/MachineInfoCard.vue
@@ -120,17 +120,16 @@
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                 <input
-                  :value="field.value ?? ''"
                   type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm"
                   :checked="String(field.value).toLowerCase() === 'true'"
                   @change="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).checked ? 'true' : 'false')"
                   @blur="$emit('update-custom-field', field)"
-                />
-                <span class="text-sm">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                >
+                <span class="text-sm" :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
               <input
                 v-else-if="field.type === 'date'"
                 :value="field.value ?? ''"
diff --git a/app/pages/component/[id]/edit.vue b/app/pages/component/[id]/edit.vue
index 757a4a1..ee55676 100644
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -304,17 +304,17 @@
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                 <input
                   v-model="field.value"
                   type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                   true-value="true"
                   false-value="false"
                   :disabled="!canEdit || saving"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
               <input
                 v-else-if="field.type === 'date'"
                 v-model="field.value"
diff --git a/app/pages/component/create.vue b/app/pages/component/create.vue
index 9657ddf..6e3ce34 100644
--- a/app/pages/component/create.vue
+++ b/app/pages/component/create.vue
@@ -271,17 +271,17 @@
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                 <input
                   v-model="field.value"
                   type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                   true-value="true"
                   false-value="false"
                   :disabled="!canEdit || submitting"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
               <input
                 v-else-if="field.type === 'date'"
                 v-model="field.value"
diff --git a/app/pages/pieces/[id]/edit.vue b/app/pages/pieces/[id]/edit.vue
index 0075e8c..794f34f 100644
--- a/app/pages/pieces/[id]/edit.vue
+++ b/app/pages/pieces/[id]/edit.vue
@@ -251,17 +251,17 @@
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                 <input
                   v-model="field.value"
                   type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                   true-value="true"
                   false-value="false"
                   :disabled="!canEdit || saving"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
               <input
                 v-else-if="field.type === 'date'"
                 v-model="field.value"
diff --git a/app/pages/pieces/create.vue b/app/pages/pieces/create.vue
index d2a76ea..9184d6d 100644
--- a/app/pages/pieces/create.vue
+++ b/app/pages/pieces/create.vue
@@ -223,17 +223,17 @@
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                 <input
                   v-model="field.value"
                   type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                   true-value="true"
                   false-value="false"
                   :disabled="!canEdit || submitting"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
               <input
                 v-else-if="field.type === 'date'"
                 v-model="field.value"
diff --git a/app/pages/product/[id]/edit.vue b/app/pages/product/[id]/edit.vue
index bd24960..f86445b 100644
--- a/app/pages/product/[id]/edit.vue
+++ b/app/pages/product/[id]/edit.vue
@@ -175,17 +175,17 @@
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                 <input
                   v-model="field.value"
                   type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                   true-value="true"
                   false-value="false"
                   :disabled="!canEdit || saving"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
               <input
                 v-else-if="field.type === 'date'"
                 v-model="field.value"
diff --git a/app/pages/product/create.vue b/app/pages/product/create.vue
index da7eb5c..566bc2a 100644
--- a/app/pages/product/create.vue
+++ b/app/pages/product/create.vue
@@ -162,17 +162,17 @@
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                 <input
                   v-model="field.value"
                   type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                   true-value="true"
                   false-value="false"
                   :disabled="!canEdit || submitting"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
               <input
                 v-else-if="field.type === 'date'"
                 v-model="field.value"