resources/js/Components/SetQueueNameForm.vue

@@ -27,11 +27,16 @@ 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,14 +15,15 @@ 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,
+        name: queue.name,       // Apenas para mostrar na tela (leitura)
-        sector: queue.sector || ''
+        sector: queue.sector || '' // O valor que vamos editar
     }));
 
     showModal.value = true;
@@ -42,12 +43,14 @@ 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,19 +11,16 @@ 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);
 
-// --- FUNÇÕES GATILHO ---
+const openTenant = () => {
-const openTenant = () => tenantModalRef.value?.openModal();
+    tenantModalRef.value?.openModal();
-const openUser = () => userModalRef.value?.openModal();
+};
-const openSector = () => sectorModalRef.value?.openModal();
+
-const openName = () => nameModalRef.value?.openModal();
+const openUser = () => {
+    userModalRef.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' },
@@ -68,27 +65,8 @@ const menuItems = [
                     {{ item.name }}
                 </Link>
 
-                <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>
@@ -119,8 +97,6 @@ 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">
@@ -184,6 +160,10 @@ 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>