feat(ui) : add tabs to machine page, compact header with site/reference badges

frontend/app/components/machine/MachineDetailHeader.vue

@@ -1,40 +1,46 @@
 <template>
-  <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-    <div class="flex flex-col gap-2">
-      <h1 class="text-3xl font-bold">
-        {{ title }}
-      </h1>
-    </div>
-    <div class="flex items-center gap-2 print:hidden" data-print-hide>
-      <button
-        @click="$emit('toggle-edit')"
-        class="btn btn-primary"
-        :class="{ 'btn-outline': isEditMode }"
-      >
-        <IconLucideSquarePen
+  <div class="space-y-3">
+    <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-3 flex-wrap">
+          <h1 class="text-2xl font-bold">{{ title }}</h1>
+          <div
+            v-if="siteName"
+            class="badge badge-outline font-semibold"
+            :style="siteStyle"
+          >
+            {{ siteName }}
+          </div>
+          <div v-if="reference" class="badge badge-outline">{{ reference }}</div>
+        </div>
+        <p v-if="description" class="text-sm text-base-content/60">{{ description }}</p>
+      </div>
+      <div class="flex items-center gap-2 print:hidden">
+        <button
+          v-if="canEdit"
+          type="button"
+          class="btn btn-primary btn-sm md:btn-md"
+          :class="{ 'btn-outline': isEditMode }"
+          @click="$emit('toggle-edit')"
+        >
+          <IconLucideSquarePen v-if="!isEditMode" class="w-4 h-4 mr-1" aria-hidden="true" />
+          <IconLucideEye v-else class="w-4 h-4 mr-1" aria-hidden="true" />
+          {{ isEditMode ? 'Voir d\u00e9tails' : 'Modifier' }}
+        </button>
+        <button
           v-if="!isEditMode"
-          class="w-5 h-5 mr-2"
-          aria-hidden="true"
-        />
-        <IconLucideEye
-          v-else
-          class="w-5 h-5 mr-2"
-          aria-hidden="true"
-        />
-        {{ isEditMode ? 'Voir détails' : 'Modifier' }}
-      </button>
-      <button
-        v-if="!isEditMode"
-        @click="$emit('open-print')"
-        type="button"
-        class="btn btn-outline btn-secondary"
-      >
-        <IconLucidePrinter class="w-5 h-5 mr-2" aria-hidden="true" />
-        Imprimer
-      </button>
-      <button type="button" class="btn btn-ghost btn-sm md:btn-md" @click="goBack">
-        Retour aux machines
-      </button>
+          type="button"
+          class="btn btn-ghost btn-sm md:btn-md"
+          title="Imprimer"
+          @click="$emit('open-print')"
+        >
+          <IconLucidePrinter class="w-4 h-4" aria-hidden="true" />
+        </button>
+        <NuxtLink to="/machines" class="btn btn-ghost btn-sm md:btn-md">
+          <IconLucideArrowLeft class="w-4 h-4 mr-1" aria-hidden="true" />
+          Parc machines
+        </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
@@ -43,11 +49,16 @@
 import IconLucideSquarePen from '~icons/lucide/square-pen'
 import IconLucideEye from '~icons/lucide/eye'
 import IconLucidePrinter from '~icons/lucide/printer'
+import IconLucideArrowLeft from '~icons/lucide/arrow-left'
 
-const router = useRouter()
+const { canEdit } = usePermissions()
 
-defineProps<{
+const props = defineProps<{
   title: string
+  description?: string
+  siteName?: string
+  siteColor?: string
+  reference?: string
   isEditMode: boolean
 }>()
 
@@ -56,12 +67,12 @@ defineEmits<{
   'open-print': []
 }>()
 
-function goBack() {
-  if (window.history.length > 1) {
-    router.back()
+const siteStyle = computed(() => {
+  if (!props.siteColor) return {}
+  return {
+    borderColor: props.siteColor + '60',
+    backgroundColor: props.siteColor + '25',
+    color: props.siteColor,
   }
-  else {
-    navigateTo('/machines')
-  }
-}
+})
 </script>