fix: Correção de bugs em componentes.

fix: Bugs no componente de divisão de setores.|Preventivo aplicado

resources/js/Components/SetQueueNameForm.vue

@@ -27,16 +27,11 @@ const submitQueueInfo = () => {
         onSuccess: () => closeModal(),
     });
 };
+defineExpose({ openModal });
+
 </script>
 
 <template>
-    <button 
-        type="button"
-        class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
-        @click="openModal"
-    >
-        Configurar Filas
-    </button>
 
     <Teleport to="body">
         <div v-if="showModal" class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0 flex items-center justify-center">

resources/js/Components/SetQueueSectorForm.vue

@@ -15,15 +15,14 @@ const form = useForm({
     queues: []
 });
 
+// Função que o Pai vai chamar
 const openModal = () => {
-    // Pegamos as filas disponíveis na página (assumindo que o Dashboard passa 'queues')
-    // Mapeamos para o formato que o form precisa editar
     const currentQueues = page.props.queues || [];
 
     form.queues = currentQueues.map(queue => ({
         id: queue.id,
-        name: queue.name,       // Apenas para mostrar na tela (leitura)
-        sector: queue.sector || '' // O valor que vamos editar
+        name: queue.name,
+        sector: queue.sector || ''
     }));
 
     showModal.value = true;
@@ -43,14 +42,12 @@ const closeModal = () => {
     showModal.value = false;
     form.reset();
 };
+
+defineExpose({ openModal });
 </script>
 
 <template>
     <div>
-        <button @click.prevent.stop="openModal"
-            class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">
-            Organizar Setores
-        </button>
 
         <Modal :show="showModal" @close="closeModal">
             <div class="p-6">

resources/js/Layouts/AuthenticatedLayout.vue

@@ -11,16 +11,19 @@ import CreateUserModal from '@/Components/CreateUserModal.vue';
 
 const showingSidebar = ref(false);
 
+// SetQueueForm
+
+// --- REFERÊNCIAS PARA OS MODAIS ---
 const tenantModalRef = ref(null);
 const userModalRef = ref(null);
+const sectorModalRef = ref(null);
+const nameModalRef = ref(null);
 
-const openTenant = () => {
-    tenantModalRef.value?.openModal();
-};
-
-const openUser = () => {
-    userModalRef.value?.openModal();
-};
+// --- FUNÇÕES GATILHO ---
+const openTenant = () => tenantModalRef.value?.openModal();
+const openUser = () => userModalRef.value?.openModal();
+const openSector = () => sectorModalRef.value?.openModal();
+const openName = () => nameModalRef.value?.openModal();
 
 const menuItems = [
     { name: 'Dashboard', route: 'dashboard', icon: 'M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z' },
@@ -65,8 +68,27 @@ const menuItems = [
                     {{ item.name }}
                 </Link>
 
-                <div v-if="$page.props.auth.user.role === 'admin'" class="pt-4 mt-4 border-t border-gray-100">
+                <button @click="openName"
+                    class="w-full group flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50 hover:text-ingline-600 transition-all duration-200">
+                    <svg class="mr-3 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-ingline-500" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                    </svg>
+                    Renomear Filas
+                </button>
 
+                <button @click="openSector"
+                    class="w-full group flex items-center px-4 py-3 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50 hover:text-ingline-600 transition-all duration-200">
+                    <svg class="mr-3 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-ingline-500" fill="none"
+                        viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                    </svg>
+                    Organizar Setores
+                </button>
+
+                <div v-if="$page.props.auth.user.role === 'admin'" class="pt-4 mt-4 border-t border-gray-100">
                     <p class="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
                         Administração
                     </p>
@@ -97,6 +119,8 @@ const menuItems = [
 
             <CreateTenantModal ref="tenantModalRef" />
             <CreateUserModal ref="userModalRef" />
+            <SetQueueNameForm ref="nameModalRef" />
+            <SetQueueSectorForm ref="sectorModalRef" />
 
             <div class="absolute bottom-0 w-full p-4 bg-white border-t border-gray-100">
                 <div class="flex items-center space-x-3">
@@ -160,10 +184,6 @@ const menuItems = [
                             </template>
                             <template #content>
                                 <DropdownLink :href="route('profile.edit')"> Perfil </DropdownLink>
-                                <SetQueueNameForm />
-                                <SetQueueSectorForm />
-
-
                                 <div class="border-t border-gray-100 my-1"></div>
                                 <DropdownLink :href="route('logout')" method="post" as="button"> Sair </DropdownLink>