From d43d103d492b3a3e4a00b9f4b9476310daac33dc Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Tue, 21 Jul 2026 17:41:46 -0400
Subject: [PATCH 1/2] Add Flow Genie duplication feature

---
 .../components/shared/ellipsisMenuActions.js  |   9 +
 .../components/shared/flowGenieNavigation.js  |  20 +-
 .../designer/CreateFlowGenieModal.vue         | 299 ++++++++++++++++++
 .../processes/designer/RecentAssetsList.vue   |  24 +-
 4 files changed, 347 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/processes/designer/CreateFlowGenieModal.vue

diff --git a/resources/js/components/shared/ellipsisMenuActions.js b/resources/js/components/shared/ellipsisMenuActions.js
index 723b9af3ff..33e7139e11 100644
--- a/resources/js/components/shared/ellipsisMenuActions.js
+++ b/resources/js/components/shared/ellipsisMenuActions.js
@@ -269,6 +269,15 @@ export default {
             "view-additional-asset-actions",
           ],
         },
+        {
+          value: "copy-item",
+          content: "Copy",
+          icon: "fas fa-copy",
+          permission: [
+            "create-flow_genies",
+            "view-additional-asset-actions",
+          ],
+        },
         {
           value: "add-to-project",
           content: "Add to Project",
diff --git a/resources/js/components/shared/flowGenieNavigation.js b/resources/js/components/shared/flowGenieNavigation.js
index fa2ec3b728..8b827a92f5 100644
--- a/resources/js/components/shared/flowGenieNavigation.js
+++ b/resources/js/components/shared/flowGenieNavigation.js
@@ -9,20 +9,32 @@ export default {
      * navigation for flow genies actions
      */
     onFlowGenieNavigate(action, data) {
+      const name = data.name || data.title;
       switch (action.value) {
         case "edit-item":
           this.editFlowGenie(data);
-          break;  
-        case 'add-to-project':
-          this.showAddToProjectModal(data.title, data.id);
+          break;
+        case "copy-item":
+          this.doDuplicateFlowGenie(data);
+          break;
+        case "add-to-project":
+          this.showAddToProjectModal(name, data.id);
           break;
         case "remove-item":
           this.doDeleteFlowGenie(data);
           break;
+        default:
+          break;
       }
     },
     /**
-     * go to edit decision table
+     * Open the shared Create Flow Genie modal in duplicate mode.
+     */
+    doDuplicateFlowGenie(data) {
+      this.showFlowGenieCopyModal(data);
+    },
+    /**
+     * go to edit flow genie
      */
     editFlowGenie(row) {
       window.location.href = `/designer/flow-genies/${row.id}/edit`;
diff --git a/resources/js/processes/designer/CreateFlowGenieModal.vue b/resources/js/processes/designer/CreateFlowGenieModal.vue
new file mode 100644
index 0000000000..ff9526b82b
--- /dev/null
+++ b/resources/js/processes/designer/CreateFlowGenieModal.vue
@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <modal
+      id="createFlowGenieDesigner"
+      size="md"
+      :title="modalSetUp"
+      :set-custom-buttons="true"
+      :custom-buttons="customModalButtons"
+      :required-in-footer="false"
+      @addAsset="onSubmit"
+      @duplicateAsset="onDuplicate"
+      @close="onClose"
+      @hidden="onClose"
+    >
+      <Required />
+      <b-form-group
+        required
+        :label="$t('Name')"
+        :invalid-feedback="errorMessage('name', errors)"
+        :state="errorState('name', errors)"
+        :description="errorState('name', errors) === false ? '' : $t('The Genie name must be unique.')"
+      >
+        <b-form-input
+          v-model="formData.name"
+          required
+          autofocus
+          autocomplete="off"
+          :state="errorState('name', errors)"
+          name="name"
+        />
+      </b-form-group>
+      <b-form-group
+        required
+        :label="$t('Description')"
+        :invalid-feedback="errorMessage('description', errors)"
+        :state="errorState('description', errors)"
+      >
+        <b-form-textarea
+          v-model="formData.description"
+          autocomplete="off"
+          :state="errorState('description', errors)"
+          name="description"
+        />
+      </b-form-group>
+      <category-select
+        v-model="formData.flow_genie_category_id"
+        :label="$t('Category')"
+        api-get="package-ai/flow_genie_categories"
+        api-list="package-ai/flow_genie_categories"
+        name="category"
+        :errors="addError.flow_genie_category_id"
+      />
+      <project-select
+        :label="$t('Project')"
+        api-get="projects"
+        api-list="projects"
+        v-model="formData.projects"
+        :errors="errors.projects"
+      />
+    </modal>
+  </div>
+</template>
+
+<script>
+import { FormErrorsMixin, Required, Modal, CategorySelect, ProjectSelect } from "SharedComponents";
+
+const channel = new BroadcastChannel("assetCreation");
+
+export default {
+  components: {
+    Modal,
+    Required,
+    CategorySelect,
+    ProjectSelect,
+  },
+  mixins: [FormErrorsMixin],
+  props: {
+    assetType: {
+      type: String,
+      default: "Flow Genie",
+    },
+    assetName: {
+      type: String,
+      default: "",
+    },
+    assetData: {
+      type: Object,
+      default: () => ({}),
+    },
+    duplicate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      autoValidate: false,
+      errors: {},
+      addError: {},
+      currentUserId: window.ProcessMaker?.user?.id,
+      customModalButtons: [
+        {
+          content: this.$t("Cancel"),
+          action: "close",
+          variant: "outline-secondary",
+          disabled: false,
+          hidden: false,
+        },
+        {
+          content: this.$t("Save"),
+          action: "addAsset",
+          variant: "primary",
+          disabled: false,
+          hidden: false,
+        },
+        {
+          content: this.$t("Duplicate"),
+          action: "duplicateAsset",
+          variant: "primary",
+          disabled: false,
+          hidden: true,
+        },
+      ],
+      formData: {
+        name: null,
+        description: null,
+        projects: [],
+        flow_genie_category_id: null,
+        config: null,
+        id: null,
+      },
+      disabled: false,
+    };
+  },
+  computed: {
+    modalSetUp() {
+      if (this.duplicate) {
+        this.customModalButtons[1].hidden = true;
+        this.customModalButtons[2].hidden = false;
+        return `${this.$t("Copy of")} ${this.assetType}: ${this.assetName}`;
+      }
+      this.customModalButtons[1].hidden = false;
+      this.customModalButtons[2].hidden = true;
+      return `${this.$t("Create")} ${this.assetType}`;
+    },
+  },
+  watch: {
+    formData: {
+      handler() {
+        if (this.autoValidate) {
+          this.validateData();
+        }
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.resetFormData();
+    this.resetErrors();
+  },
+  methods: {
+    show() {
+      this.initializeFormData();
+      this.$bvModal.show("createFlowGenieDesigner");
+    },
+    initializeFormData() {
+      if (this.duplicate && this.assetData) {
+        this.formData = {
+          id: this.assetData.id,
+          name: `${this.assetName || this.assetData.name || ""} ${this.$t("Copy")}`.trim(),
+          description: this.assetData.description || "",
+          flow_genie_category_id: this.assetData.flow_genie_category_id,
+          config: this.assetData.config,
+          projects: this.parseProjects(this.assetData.projects),
+        };
+        return;
+      }
+      this.resetFormData();
+    },
+    parseProjects(projects) {
+      if (!projects) {
+        return "";
+      }
+      let parsed = projects;
+      if (typeof projects === "string") {
+        try {
+          parsed = JSON.parse(projects);
+        } catch (e) {
+          return projects;
+        }
+      }
+      if (Array.isArray(parsed)) {
+        return parsed
+          .map((project) => (typeof project === "object" ? project.id : project))
+          .filter((id) => id !== null && id !== undefined && id !== "")
+          .join(",");
+      }
+      return "";
+    },
+    resetFormData() {
+      this.formData = {
+        name: null,
+        description: null,
+        projects: [],
+        flow_genie_category_id: null,
+        config: null,
+        id: null,
+      };
+    },
+    resetErrors() {
+      this.errors = {
+        name: null,
+        description: null,
+      };
+      this.addError = {};
+    },
+    onClose() {
+      this.$bvModal.hide("createFlowGenieDesigner");
+      this.resetFormData();
+      this.resetErrors();
+      this.autoValidate = false;
+      this.customModalButtons[1].disabled = false;
+      this.customModalButtons[2].disabled = false;
+    },
+    onSubmit() {
+      this.autoValidate = true;
+      this.validateData();
+      if (!_.isEmpty(this.errors.name) || !_.isEmpty(this.errors.description)) {
+        return;
+      }
+
+      window.ProcessMaker.apiClient
+        .post("package-ai/flow_genies", this.formData)
+        .then(({ data }) => {
+          channel.postMessage({
+            assetType: "flow-genie",
+            id: data.id,
+            title: data.name,
+          });
+          ProcessMaker.alert(this.$t("The Genie was created."), "success");
+          window.location = `/designer/flow-genies/${data.id}/edit`;
+        })
+        .catch((error) => {
+          this.handleValidationError(error);
+        });
+    },
+    onDuplicate() {
+      this.autoValidate = true;
+      this.validateData();
+      if (!_.isEmpty(this.errors.name) || !_.isEmpty(this.errors.description)) {
+        return;
+      }
+
+      const sourceId = this.formData.id || this.assetData.id;
+      window.ProcessMaker.apiClient
+        .put(`package-ai/flow_genies/${sourceId}/duplicate`, this.formData)
+        .then(() => {
+          ProcessMaker.alert(this.$t("The Genie was duplicated."), "success");
+          this.onClose();
+          this.$emit("reload");
+        })
+        .catch((error) => {
+          this.handleValidationError(error);
+        });
+    },
+    handleValidationError(error) {
+      this.disabled = false;
+      if (error.response?.status === 422) {
+        this.errors = error.response.data.errors;
+        Object.keys(this.errors).forEach((key) => {
+          this.errors[key] = this.errors[key].map((text) => {
+            const replaced = text.replace("Authtype", this.$t("Authentication Method"));
+            return this.$t(replaced);
+          });
+        });
+      }
+    },
+    validateData() {
+      const { name, description } = this.formData;
+
+      this.resetErrors();
+
+      if (_.isEmpty(name)) {
+        this.errors.name = ["The name is a required field."];
+      } else if (name.length > 255) {
+        this.errors.name = ["Name must be less than 255 characters."];
+      }
+
+      if (_.isEmpty(description)) {
+        this.errors.description = ["The description is a required field."];
+      }
+
+      const hasErrors = !(_.isEmpty(this.errors.name) && _.isEmpty(this.errors.description));
+      this.customModalButtons[1].disabled = hasErrors;
+      this.customModalButtons[2].disabled = hasErrors;
+    },
+  },
+};
+</script>
diff --git a/resources/js/processes/designer/RecentAssetsList.vue b/resources/js/processes/designer/RecentAssetsList.vue
index 5e0b26bee4..358a4b2ef6 100644
--- a/resources/js/processes/designer/RecentAssetsList.vue
+++ b/resources/js/processes/designer/RecentAssetsList.vue
@@ -124,6 +124,14 @@
             <button type="button" @click="onSubmitDuplicateScript" class="btn btn-secondary ml-2">{{ $t('Save') }}</button>
           </div>
         </b-modal>
+        <create-flow-genie-modal
+          ref="create-flow-genie-modal"
+          :duplicate="true"
+          asset-type="Flow Genie"
+          :asset-name="flowGenieName"
+          :asset-data="flowGenieData"
+          @reload="fetch()"
+        />
       </div>
     </div>
   </div>
@@ -147,6 +155,7 @@ import CreatePmBlockModal from "../../components/pm-blocks/CreatePmBlockModal.vu
 import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
 import AddToBundle from "../../components/shared/AddToBundle.vue";
 import CategorySelect from "../categories/components/CategorySelect.vue";
+import CreateFlowGenieModal from "./CreateFlowGenieModal.vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
 
@@ -158,6 +167,7 @@ export default {
     EllipsisMenu,
     AddToBundle,
     CategorySelect,
+    CreateFlowGenieModal,
   },
   mixins: [
     datatableMixin,
@@ -208,6 +218,8 @@ export default {
       processTemplateName: "",
       pmBlockName: "",
       bundleAssetType: "ProcessMaker\\Models\\Process",
+      flowGenieName: "",
+      flowGenieData: {},
     };
   },
   methods: {
@@ -267,7 +279,7 @@ export default {
         case "Decision Table":
           return this.addBundleAction(this.decisionTableActions, 2);
         case "Flow Genie":
-          return this.addBundleAction(this.flowGenieActions, 2);
+          return this.addBundleAction(this.flowGenieActions, 3);
         default:
           return []; // Handle unknown asset types as needed
       }
@@ -424,6 +436,16 @@ export default {
           }
         });
     },
+    /**
+     * Open the copy Flow Genie modal
+     */
+    showFlowGenieCopyModal(data) {
+      this.flowGenieName = data.name || data.title || "";
+      this.flowGenieData = data;
+      this.$nextTick(() => {
+        this.$refs["create-flow-genie-modal"].show();
+      });
+    },
   },
 };
 </script>

From 2ba260eb038b5d07802e9331717875ae28bb8c40 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Wed, 22 Jul 2026 12:50:06 -0400
Subject: [PATCH 2/2] Refactor CreateFlowGenieModal to CopyFlowGenieModal

---
 .../components/shared/flowGenieNavigation.js  |   2 +-
 ...wGenieModal.vue => CopyFlowGenieModal.vue} | 126 +++++-------------
 .../processes/designer/RecentAssetsList.vue   |  11 +-
 3 files changed, 40 insertions(+), 99 deletions(-)
 rename resources/js/processes/designer/{CreateFlowGenieModal.vue => CopyFlowGenieModal.vue} (62%)

diff --git a/resources/js/components/shared/flowGenieNavigation.js b/resources/js/components/shared/flowGenieNavigation.js
index 8b827a92f5..2e5e8af223 100644
--- a/resources/js/components/shared/flowGenieNavigation.js
+++ b/resources/js/components/shared/flowGenieNavigation.js
@@ -28,7 +28,7 @@ export default {
       }
     },
     /**
-     * Open the shared Create Flow Genie modal in duplicate mode.
+     * Open the copy Flow Genie modal.
      */
     doDuplicateFlowGenie(data) {
       this.showFlowGenieCopyModal(data);
diff --git a/resources/js/processes/designer/CreateFlowGenieModal.vue b/resources/js/processes/designer/CopyFlowGenieModal.vue
similarity index 62%
rename from resources/js/processes/designer/CreateFlowGenieModal.vue
rename to resources/js/processes/designer/CopyFlowGenieModal.vue
index ff9526b82b..90e2bd3e2a 100644
--- a/resources/js/processes/designer/CreateFlowGenieModal.vue
+++ b/resources/js/processes/designer/CopyFlowGenieModal.vue
@@ -1,13 +1,12 @@
 <template>
   <div>
     <modal
-      id="createFlowGenieDesigner"
+      id="copyFlowGenieDesigner"
       size="md"
-      :title="modalSetUp"
+      :title="modalTitle"
       :set-custom-buttons="true"
       :custom-buttons="customModalButtons"
       :required-in-footer="false"
-      @addAsset="onSubmit"
       @duplicateAsset="onDuplicate"
       @close="onClose"
       @hidden="onClose"
@@ -48,7 +47,7 @@
         api-get="package-ai/flow_genie_categories"
         api-list="package-ai/flow_genie_categories"
         name="category"
-        :errors="addError.flow_genie_category_id"
+        :errors="errors.flow_genie_category_id"
       />
       <project-select
         :label="$t('Project')"
@@ -64,8 +63,6 @@
 <script>
 import { FormErrorsMixin, Required, Modal, CategorySelect, ProjectSelect } from "SharedComponents";
 
-const channel = new BroadcastChannel("assetCreation");
-
 export default {
   components: {
     Modal,
@@ -87,17 +84,11 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    duplicate: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
       autoValidate: false,
       errors: {},
-      addError: {},
-      currentUserId: window.ProcessMaker?.user?.id,
       customModalButtons: [
         {
           content: this.$t("Cancel"),
@@ -106,42 +97,27 @@ export default {
           disabled: false,
           hidden: false,
         },
-        {
-          content: this.$t("Save"),
-          action: "addAsset",
-          variant: "primary",
-          disabled: false,
-          hidden: false,
-        },
         {
           content: this.$t("Duplicate"),
           action: "duplicateAsset",
           variant: "primary",
           disabled: false,
-          hidden: true,
+          hidden: false,
         },
       ],
       formData: {
+        id: null,
         name: null,
         description: null,
-        projects: [],
+        projects: "",
         flow_genie_category_id: null,
         config: null,
-        id: null,
       },
-      disabled: false,
     };
   },
   computed: {
-    modalSetUp() {
-      if (this.duplicate) {
-        this.customModalButtons[1].hidden = true;
-        this.customModalButtons[2].hidden = false;
-        return `${this.$t("Copy of")} ${this.assetType}: ${this.assetName}`;
-      }
-      this.customModalButtons[1].hidden = false;
-      this.customModalButtons[2].hidden = true;
-      return `${this.$t("Create")} ${this.assetType}`;
+    modalTitle() {
+      return `${this.$t("Copy of")} ${this.assetType}: ${this.assetName}`;
     },
   },
   watch: {
@@ -154,28 +130,20 @@ export default {
       deep: true,
     },
   },
-  mounted() {
-    this.resetFormData();
-    this.resetErrors();
-  },
   methods: {
     show() {
       this.initializeFormData();
-      this.$bvModal.show("createFlowGenieDesigner");
+      this.$bvModal.show("copyFlowGenieDesigner");
     },
     initializeFormData() {
-      if (this.duplicate && this.assetData) {
-        this.formData = {
-          id: this.assetData.id,
-          name: `${this.assetName || this.assetData.name || ""} ${this.$t("Copy")}`.trim(),
-          description: this.assetData.description || "",
-          flow_genie_category_id: this.assetData.flow_genie_category_id,
-          config: this.assetData.config,
-          projects: this.parseProjects(this.assetData.projects),
-        };
-        return;
-      }
-      this.resetFormData();
+      this.formData = {
+        id: this.assetData.id,
+        name: `${this.assetName || this.assetData.name || ""} ${this.$t("Copy")}`.trim(),
+        description: this.assetData.description || "",
+        flow_genie_category_id: this.assetData.flow_genie_category_id,
+        config: this.assetData.config,
+        projects: this.parseProjects(this.assetData.projects),
+      };
     },
     parseProjects(projects) {
       if (!projects) {
@@ -199,50 +167,28 @@ export default {
     },
     resetFormData() {
       this.formData = {
+        id: null,
         name: null,
         description: null,
-        projects: [],
+        projects: "",
         flow_genie_category_id: null,
         config: null,
-        id: null,
       };
     },
     resetErrors() {
       this.errors = {
         name: null,
         description: null,
+        flow_genie_category_id: null,
+        projects: null,
       };
-      this.addError = {};
     },
     onClose() {
-      this.$bvModal.hide("createFlowGenieDesigner");
+      this.$bvModal.hide("copyFlowGenieDesigner");
       this.resetFormData();
       this.resetErrors();
       this.autoValidate = false;
       this.customModalButtons[1].disabled = false;
-      this.customModalButtons[2].disabled = false;
-    },
-    onSubmit() {
-      this.autoValidate = true;
-      this.validateData();
-      if (!_.isEmpty(this.errors.name) || !_.isEmpty(this.errors.description)) {
-        return;
-      }
-
-      window.ProcessMaker.apiClient
-        .post("package-ai/flow_genies", this.formData)
-        .then(({ data }) => {
-          channel.postMessage({
-            assetType: "flow-genie",
-            id: data.id,
-            title: data.name,
-          });
-          ProcessMaker.alert(this.$t("The Genie was created."), "success");
-          window.location = `/designer/flow-genies/${data.id}/edit`;
-        })
-        .catch((error) => {
-          this.handleValidationError(error);
-        });
     },
     onDuplicate() {
       this.autoValidate = true;
@@ -260,20 +206,16 @@ export default {
           this.$emit("reload");
         })
         .catch((error) => {
-          this.handleValidationError(error);
-        });
-    },
-    handleValidationError(error) {
-      this.disabled = false;
-      if (error.response?.status === 422) {
-        this.errors = error.response.data.errors;
-        Object.keys(this.errors).forEach((key) => {
-          this.errors[key] = this.errors[key].map((text) => {
-            const replaced = text.replace("Authtype", this.$t("Authentication Method"));
-            return this.$t(replaced);
-          });
+          if (error.response?.status === 422) {
+            this.errors = error.response.data.errors;
+            Object.keys(this.errors).forEach((key) => {
+              this.errors[key] = this.errors[key].map((text) => {
+                const replaced = text.replace("Authtype", this.$t("Authentication Method"));
+                return this.$t(replaced);
+              });
+            });
+          }
         });
-      }
     },
     validateData() {
       const { name, description } = this.formData;
@@ -290,9 +232,9 @@ export default {
         this.errors.description = ["The description is a required field."];
       }
 
-      const hasErrors = !(_.isEmpty(this.errors.name) && _.isEmpty(this.errors.description));
-      this.customModalButtons[1].disabled = hasErrors;
-      this.customModalButtons[2].disabled = hasErrors;
+      this.customModalButtons[1].disabled = !(
+        _.isEmpty(this.errors.name) && _.isEmpty(this.errors.description)
+      );
     },
   },
 };
diff --git a/resources/js/processes/designer/RecentAssetsList.vue b/resources/js/processes/designer/RecentAssetsList.vue
index 358a4b2ef6..452ab9c34a 100644
--- a/resources/js/processes/designer/RecentAssetsList.vue
+++ b/resources/js/processes/designer/RecentAssetsList.vue
@@ -124,9 +124,8 @@
             <button type="button" @click="onSubmitDuplicateScript" class="btn btn-secondary ml-2">{{ $t('Save') }}</button>
           </div>
         </b-modal>
-        <create-flow-genie-modal
-          ref="create-flow-genie-modal"
-          :duplicate="true"
+        <copy-flow-genie-modal
+          ref="copy-flow-genie-modal"
           asset-type="Flow Genie"
           :asset-name="flowGenieName"
           :asset-data="flowGenieData"
@@ -155,7 +154,7 @@ import CreatePmBlockModal from "../../components/pm-blocks/CreatePmBlockModal.vu
 import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
 import AddToBundle from "../../components/shared/AddToBundle.vue";
 import CategorySelect from "../categories/components/CategorySelect.vue";
-import CreateFlowGenieModal from "./CreateFlowGenieModal.vue";
+import CopyFlowGenieModal from "./CopyFlowGenieModal.vue";
 
 const uniqIdsMixin = createUniqIdsMixin();
 
@@ -167,7 +166,7 @@ export default {
     EllipsisMenu,
     AddToBundle,
     CategorySelect,
-    CreateFlowGenieModal,
+    CopyFlowGenieModal,
   },
   mixins: [
     datatableMixin,
@@ -443,7 +442,7 @@ export default {
       this.flowGenieName = data.name || data.title || "";
       this.flowGenieData = data;
       this.$nextTick(() => {
-        this.$refs["create-flow-genie-modal"].show();
+        this.$refs["copy-flow-genie-modal"].show();
       });
     },
   },