From 0060ad38b7a1a96654ce4c28c8e3e08ca7e55f62 Mon Sep 17 00:00:00 2001
From: Md Afiq Iskandar <mdafiqiskandar@gmail.com>
Date: Wed, 23 Jul 2025 08:17:42 +0800
Subject: [PATCH] Refactor Navigation and Form/Process Builder UI for Improved
 User Experience

- Removed redundant button elements for Templates and History from the form and process builder pages to streamline the interface.
- Consolidated action buttons into dropdown menus for better organization and accessibility.
- Enhanced visual hierarchy by adding section headers for Form Actions and Process Actions in dropdowns, improving clarity for users.
- Updated styles for dropdown menus to ensure consistent appearance and interaction across different screen sizes.
---
 navigation/index.js             | 50 -----------------------------
 pages/form-builder/index.vue    | 44 +++++++++++++-------------
 pages/process-builder/index.vue | 56 ++++++++++++---------------------
 3 files changed, 42 insertions(+), 108 deletions(-)

diff --git a/navigation/index.js b/navigation/index.js
index 034cfbd..5d8c684 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -45,54 +45,4 @@ export default [
       },
     ],
   },
-  {
-    header: "Execute & Monitor",
-    description: "Run processes and track their progress",
-    child: [
-      {
-        title: "Process Execution",
-        icon: "material-symbols:play-circle",
-        child: [
-          {
-            title: "Execution Dashboard",
-            path: "/execution",
-            child: [],
-            meta: {
-              description: "Monitor active processes and performance metrics",
-            },
-          },
-          {
-            title: "Start New Process",
-            path: "/execution/new-case",
-            child: [],
-            meta: {
-              description: "Initiate a new process instance",
-            },
-          },
-        ],
-      },
-      {
-        title: "Task Management",
-        icon: "material-symbols:task",
-        child: [
-          {
-            title: "My Tasks",
-            path: "/execution/inbox",
-            child: [],
-            meta: {
-              description: "View and complete assigned tasks",
-            },
-          },
-          {
-            title: "Process History",
-            path: "/execution/history",
-            child: [],
-            meta: {
-              description: "Review completed processes and audit trails",
-            },
-          },
-        ],
-      },
-    ],
-  },
 ];
diff --git a/pages/form-builder/index.vue b/pages/form-builder/index.vue
index dcc8265..9059a4d 100644
--- a/pages/form-builder/index.vue
+++ b/pages/form-builder/index.vue
@@ -61,24 +61,7 @@
           </RsButton>
         </div>
         
-        <!-- Secondary Action Group -->
-        <div v-if="!isPreview" class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
-          <RsButton @click="showTemplatesModal = true" variant="secondary" size="sm" class="mr-1 md:mr-2">
-            <Icon name="material-symbols:description-outline" class="mr-0 md:mr-1" />
-            <span class="hidden lg:inline">Templates</span>
-          </RsButton>
-          
-          <!-- Form History button - only show if form is saved -->
-          <RsButton 
-            v-if="formStore.currentFormId" 
-            @click="showFormHistoryModal = true" 
-            variant="secondary" 
-            size="sm"
-          >
-            <Icon name="material-symbols:history" class="mr-0 md:mr-1" />
-            <span class="hidden lg:inline">History</span>
-          </RsButton>
-        </div>
+
         
         <!-- More Actions Dropdown -->
         <div v-if="!isPreview" class="relative">
@@ -87,12 +70,29 @@
           </RsButton>
           
           <div v-if="showDropdown" class="dropdown-menu absolute right-0 mt-2 bg-white rounded shadow-lg py-1 z-10 w-48 text-gray-800">
-            <button @click="showFormSettings = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-50 flex items-center transition-colors">
-              <Icon name="material-symbols:code" class="mr-3 w-4 h-4 text-gray-500" />
+            <!-- Form Actions -->
+            <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Form Actions
+            </div>
+            <button @click="showTemplatesModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
+              <Icon name="material-symbols:description-outline" class="mr-2 w-4 h-4" />
+              <span>Templates</span>
+            </button>
+            <button v-if="formStore.currentFormId" @click="showFormHistoryModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
+              <Icon name="material-symbols:history" class="mr-2 w-4 h-4" />
+              <span>History</span>
+            </button>
+            
+            <!-- Settings -->
+            <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide mt-2">
+              Settings
+            </div>
+            <button @click="showFormSettings = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
+              <Icon name="material-symbols:code" class="mr-2 w-4 h-4" />
               <span>Form Settings</span>
             </button>
-            <button @click="navigateToManage(); showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-50 flex items-center transition-colors">
-              <Icon name="material-symbols:settings" class="mr-3 w-4 h-4 text-gray-500" />
+            <button @click="navigateToManage(); showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
+              <Icon name="material-symbols:settings" class="mr-2 w-4 h-4" />
               <span>Manage Forms</span>
             </button>
           </div>
diff --git a/pages/process-builder/index.vue b/pages/process-builder/index.vue
index 976483e..d29cd72 100644
--- a/pages/process-builder/index.vue
+++ b/pages/process-builder/index.vue
@@ -2334,29 +2334,7 @@ const sendToBack = () => {
           </RsButton>
         </div>
         
-        <!-- Templates button - Hidden on mobile -->
-        <div class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
-          <RsButton @click="showTemplatesModal = true" variant="secondary" size="sm" :disabled="!hasCurrentProcess">
-            <Icon name="material-symbols:description-outline" class="mr-0 md:mr-1" />
-            <span class="hidden lg:inline">Templates</span>
-          </RsButton>
-        </div>
 
-        <!-- Process History button - Hidden on mobile, only show if process is saved -->
-        <div v-if="processStore.currentProcess && processStore.currentProcess.id" class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
-          <RsButton @click="showProcessHistoryModal = true" variant="secondary" size="sm">
-            <Icon name="material-symbols:history" class="mr-0 md:mr-1" />
-            <span class="hidden lg:inline">History</span>
-          </RsButton>
-        </div>
-
-        <!-- Export button - Hidden on mobile -->
-        <div class="mr-1 md:mr-2 border-r border-gray-200 pr-1 md:pr-2 hidden md:block">
-          <RsButton @click="showExportModal = true" variant="secondary" size="sm" :disabled="!hasCurrentProcess">
-            <Icon name="material-symbols:download" class="mr-0 md:mr-1" />
-            <span class="hidden lg:inline">Export</span>
-          </RsButton>
-        </div>
         
         <!-- Secondary actions -->
         <div class="flex items-center">
@@ -2366,20 +2344,26 @@ const sendToBack = () => {
             </RsButton>
             
             <div v-if="showDropdown" class="dropdown-menu absolute right-0 mt-2 bg-white rounded shadow-lg py-1 z-10 w-48 text-gray-800">
-              <!-- Mobile-only actions -->
-              <div v-if="isMobile" class="md:hidden border-b border-gray-200 pb-1 mb-1">
-                <button @click="showTemplatesModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
-                  <Icon name="material-symbols:description-outline" class="mr-2 w-4 h-4" />
-                  <span>Templates</span>
-                </button>
-                <button v-if="processStore.currentProcess && processStore.currentProcess.id" @click="showProcessHistoryModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
-                  <Icon name="material-symbols:history" class="mr-2 w-4 h-4" />
-                  <span>History</span>
-                </button>
-                <button @click="showExportModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
-                  <Icon name="material-symbols:download" class="mr-2 w-4 h-4" />
-                  <span>Export</span>
-                </button>
+              <!-- Process Actions -->
+              <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide">
+                Process Actions
+              </div>
+              <button @click="showTemplatesModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
+                <Icon name="material-symbols:description-outline" class="mr-2 w-4 h-4" />
+                <span>Templates</span>
+              </button>
+              <button v-if="processStore.currentProcess && processStore.currentProcess.id" @click="showProcessHistoryModal = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
+                <Icon name="material-symbols:history" class="mr-2 w-4 h-4" />
+                <span>History</span>
+              </button>
+              <button @click="showExportModal = true; showDropdown = false" :disabled="!hasCurrentProcess" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center disabled:opacity-50">
+                <Icon name="material-symbols:download" class="mr-2 w-4 h-4" />
+                <span>Export</span>
+              </button>
+              
+              <!-- Settings -->
+              <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase tracking-wide mt-2">
+                Settings
               </div>
               <button @click="showProcessSettings = true; showDropdown = false" class="w-full text-left px-4 py-2 hover:bg-gray-100 flex items-center">
                 <Icon name="material-symbols:tune" class="mr-2 w-4 h-4" />