Enhance ProcessFlowCanvas and Add VueFlow Test Component

- Refactored the ProcessFlowCanvas.vue component to improve code readability and maintainability, including consistent formatting and enhanced logging for debugging.
- Introduced a new test page (test.vue) featuring a VueFlow component to facilitate testing of flow functionalities with sample nodes and edges.
- Wrapped the VueFlow component in a <client-only> tag in both ProcessFlowCanvas.vue and the new test.vue to prevent server-side rendering issues.
- Updated styles and structure in the process builder index.vue to ensure proper rendering and maintain a clean layout.

pages/process-builder/index.vue

@@ -2118,7 +2118,9 @@ const sendToBack = () => {
 </script>
 
 <template>
-  <div class="process-builder flex flex-col h-screen bg-white">
+<div>
+  <client-only>
+    <div class="process-builder flex flex-col h-screen bg-white">
     <!-- Header Bar -->
     <header
       class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shadow-sm"
@@ -2911,7 +2913,9 @@ const sendToBack = () => {
       @close="showProcessHistoryModal = false"
       @restored="handleProcessRestored"
     />
-  </div>
+    </div>
+  </client-only>
+</div>
 </template>
 
 <style scoped>

pages/test.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="vue-flow-test">
+    <h3>Vue Flow Test Component</h3>
+    <div class="test-container">
+      <client-only>
+        <VueFlow
+          :nodes="testNodes"
+          :edges="testEdges"
+          class="test-flow"
+          style="height: 400px"
+        >
+          <Background />
+          <Controls />
+        </VueFlow>
+      </client-only>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { VueFlow } from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { Controls } from "@vue-flow/controls";
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+import '@vue-flow/controls/dist/style.css';
+import '@vue-flow/minimap/dist/style.css';
+
+console.log("🧪 VueFlowTest component loaded");
+
+const testNodes = ref([
+  {
+    id: "test-1",
+    type: "default",
+    position: { x: 100, y: 100 },
+    data: { label: "Test Node 1" },
+  },
+  {
+    id: "test-2",
+    type: "default",
+    position: { x: 300, y: 100 },
+    data: { label: "Test Node 2" },
+  },
+]);
+
+const testEdges = ref([
+  {
+    id: "test-edge-1",
+    source: "test-1",
+    target: "test-2",
+  },
+]);
+
+console.log("🧪 Test nodes:", testNodes.value);
+console.log("🧪 Test edges:", testEdges.value);
+</script>
+
+<style scoped>
+.vue-flow-test {
+  padding: 20px;
+  border: 2px solid #ccc;
+  margin: 20px;
+}
+
+.test-container {
+  width: 100%;
+  height: 450px;
+  border: 1px solid #ddd;
+  position: relative;
+}
+
+.test-flow {
+  width: 100%;
+  height: 100%;
+}
+</style>