feat: add profile management flow

app/pages/machines.vue

@@ -1,16 +1,12 @@
 <template>
   <main class="container mx-auto px-6 py-8">
     <!-- Hero Section -->
-    <div class="hero min-h-[30vh] bg-gradient-to-r from-primary to-secondary">
-      <div class="hero-content text-center text-neutral-content">
-        <div class="max-w-md">
-          <h1 class="mb-5 text-4xl font-bold">Gestion des Machines</h1>
-          <p class="mb-5">
-            Gérez vos machines industrielles par site et par type.
-          </p>
-        </div>
-      </div>
-    </div>
+    <PageHero
+      title="Gestion des Machines"
+      subtitle="Gérez vos machines industrielles par site et par type."
+      min-height="min-h-[24vh]"
+      max-width="max-w-md"
+    />
 
     <!-- Machines Management -->
     <div class="my-8">
@@ -250,15 +246,17 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onMounted, computed, watch } from 'vue'
 import { useMachines } from '~/composables/useMachines'
 import { useSites } from '~/composables/useSites'
 import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useToast } from '~/composables/useToast'
+import PageHero from '~/components/PageHero.vue'
 
 const { machines, loading, loadMachines, createMachineFromType, deleteMachine } = useMachines()
 const { sites, loadSites } = useSites()
 const { machineTypes, loadMachineTypes } = useMachineTypesApi()
+const route = useRoute()
 
 // Data
 const showAddMachineModal = ref(false)
@@ -367,13 +365,16 @@ onMounted(async () => {
     loadSites(),
     loadMachineTypes()
   ])
-  
-  // Vérifier si on doit ouvrir automatiquement la modale d'ajout
-  const route = useRoute()
-  if (route.query.add === 'true') {
-    showAddMachineModal.value = true
-    // Nettoyer l'URL
-    await navigateTo('/machines', { replace: true })
-  }
 })
-</script> 
+
+watch(
+  () => route.query.add,
+  async (shouldOpen) => {
+    if (shouldOpen === 'true') {
+      showAddMachineModal.value = true
+      await navigateTo('/machines', { replace: true })
+    }
+  },
+  { immediate: true }
+)
+</script>