@evenicanpm/admin-integrate 2.0.1 → 2.3.1

package/documents/Process/get-process-details.ts

@@ -39,6 +39,8 @@ const _GET_PROCESS_BY_ID = gql`
         extendedFields
         properties
         maxEndpointMessageAttempts
+        directionTypeId
+        processTemplateId
         created
         modified
       }

package/documents/ProcessConfig/fragments.ts

@@ -63,8 +63,6 @@ export const ENDPOINT_EXPORT_FRAGMENT = gql`
         Enabled
       }
     }
-    TemplateConfig
-    ProcessTemplateId
   }
 `;
 
@@ -109,6 +107,8 @@ export const PROCESS_EXPORT_FRAGMENT = gql`
       Sort
       Params
       ParallelProcessingGroup
+      DirectionTypeId
+      ProcessTemplateId
     }
     ProcessIcon
     IsTriggered

package/documents/ProcessExport/read.ts

@@ -101,6 +101,8 @@ const _GET_CONFIGURATION_EXPORT = gql`
         Sort
         Params
         ParallelProcessingGroup
+        ProcessTemplateId
+        DirectionTypeId
       }
     }
   }

package/documents/ProcessTemplate/fragments.ts

@@ -7,6 +7,7 @@ export const PROCESS_TEMPLATE_FRAGMENT = gql`
     isActive
     created
     modified
+    directionTypeId
     pages {
       id
       title
@@ -47,6 +48,13 @@ export const PROCESS_TEMPLATE_FRAGMENT = gql`
         }
       }
     }
+    mappings {
+      fieldName
+      jsonPath
+      jsonValuePath
+      format
+      inputTypeCode
+    }
   }
 `;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/admin-integrate",
-	"version": "2.0.1",
+	"version": "2.3.1",
 	"description": "e4Integrate Admin Panel",
 	"type": "module",
 	"scripts": {
@@ -21,5 +21,5 @@
 		"elkjs": "^0.10.0",
 		"lodash": "^4.17.21"
 	},
-	"gitHead": "bbaff05f6f592114ad7a25caeee531e4fa1b14cf"
+	"gitHead": "7a5a6a8c3c3dd9efe96fbbb884b21e7681d32550"
 }

package/src/components/integration-view/nodes/group-node.tsx

@@ -38,7 +38,7 @@ export function GroupNode(props: NodeProps): JSX.Element {
 						paddingRight: "48px",
 					}}
 				>
-					{props.data.variant === "process" && !!props?.data?.canEdit ? (
+					{props.data.variant === "process" && props?.data?.canEdit ? (
 						<AddCircleOutlineIcon
 							sx={{
 								color: "grey.600",

package/src/components/templatesV2/inputs/FormikPageBody.tsx

@@ -148,6 +148,7 @@ export function FormikPageBody({
 		disabledFields,
 		setFieldValidationInProgress,
 		submitValidationResults,
+		isCreateMode,
 	};
 
 	const renderRow = (

package/src/components/templatesV2/inputs/primitives/TextWithQueryInput.tsx

@@ -66,6 +66,8 @@ interface DisplayStateInput {
 	helpText?: string | null;
 	validating: boolean;
 	readOnly?: boolean;
+	isEditableAfterCreate?: boolean;
+	isCreateMode?: boolean;
 }
 
 function getInputDisplayState({
@@ -75,11 +77,14 @@ function getInputDisplayState({
 	helpText,
 	validating,
 	readOnly,
+	isEditableAfterCreate,
+	isCreateMode,
 }: DisplayStateInput): {
 	displayError: string | undefined;
 	displayHelpText: string;
 	formHelperTextSx: SxProps<Theme>;
 	isDisabled: boolean;
+	isCreateMode: boolean;
 } {
 	const showError = Boolean(error);
 	const effectiveValidation = getEffectiveValidation(
@@ -94,7 +99,11 @@ function getInputDisplayState({
 	const isError = showError || effectiveValidation?.isValid === false;
 	const displayError = getDisplayError(validating, isError, helperMessage);
 	const displayHelpText = validating ? "Checking…" : helperMessage;
-	const isDisabled = Boolean(readOnly || validating);
+	const isDisabled = Boolean(
+		readOnly ||
+			validating ||
+			(isEditableAfterCreate === false && !isCreateMode),
+	);
 	const formHelperTextSx: SxProps<Theme> = {
 		...(validating && { color: "text.secondary" }),
 		...(isSuccess && !validating && { color: "success.main" }),
@@ -105,6 +114,7 @@ function getInputDisplayState({
 		displayHelpText,
 		formHelperTextSx,
 		isDisabled,
+		isCreateMode: isCreateMode || false,
 	};
 }
 
@@ -128,6 +138,8 @@ export interface TextWithQueryInputProps {
 	options?: SelectorOption[];
 	/** Result from validateFieldOnSubmit (on Next click); shown below field. */
 	submitValidationResult?: SubmitValidationResult | null;
+	isEditableAfterCreate?: boolean;
+	isCreateMode?: boolean;
 }
 
 export function TextWithQueryInput({
@@ -147,6 +159,8 @@ export function TextWithQueryInput({
 	placeholder,
 	options = [],
 	submitValidationResult,
+	isEditableAfterCreate,
+	isCreateMode,
 }: Readonly<TextWithQueryInputProps>) {
 	const [validation, setValidation] = React.useState<{
 		isValid: boolean;
@@ -156,6 +170,7 @@ export function TextWithQueryInput({
 
 	const handleBlur = React.useCallback(async () => {
 		onBlur?.();
+		if (isEditableAfterCreate === false && !isCreateMode) return;
 		const strValue = valueToString(value);
 		if (!strValue && inputType !== InputType.CHECKBOX) {
 			setValidation(null);
@@ -195,6 +210,8 @@ export function TextWithQueryInput({
 		onBlur,
 		validateFormikBeforeApi,
 		setFieldValidationInProgress,
+		isEditableAfterCreate,
+		isCreateMode,
 	]);
 
 	if (readOnly) {
@@ -216,6 +233,8 @@ export function TextWithQueryInput({
 		helpText,
 		validating,
 		readOnly,
+		isEditableAfterCreate,
+		isCreateMode,
 	});
 
 	const clearValidationAndSet = (v: TextWithQueryValue) => {

package/src/components/templatesV2/inputs/renderers/renderFormControl.tsx

@@ -200,6 +200,7 @@ export function renderFormControl({
 	disabledFields,
 	setFieldValidationInProgress,
 	submitValidationResults,
+	isCreateMode,
 }: {
 	input: ProcessTemplateInput;
 	templateId: string;
@@ -221,6 +222,7 @@ export function renderFormControl({
 		string,
 		{ isValid: boolean; message: string }
 	>;
+	isCreateMode?: boolean;
 }) {
 	const k = templateFieldKey(templateId, input.fieldName ?? "");
 	const err = errors[k] ?? null;
@@ -263,6 +265,8 @@ export function renderFormControl({
 						setFieldValidationInProgress={setFieldValidationInProgress}
 						options={getSelectorOptionsFromInput(input)}
 						submitValidationResult={submitValidationResult}
+						isEditableAfterCreate={input.isEditableAfterCreate ?? true}
+						isCreateMode={isCreateMode}
 					/>
 				)}
 			</Field>

package/src/components/templatesV2/types.tsx

@@ -19,8 +19,8 @@ export type ProcessTemplateInputSchema = ArrayElement<
 export type Data = { processTemplate: ProcessTemplate[] };
 
 export type ProcessTemplateFilter = {
-	processTemplateGroupId?: string | null;
-	processTemplateId?: string | null;
+	sourceTemplateId?: string | null;
+	targetTemplateId?: string | null;
 };
 
 export type FieldValue =

package/src/components/templatesV2/utils/parseTemplateValuesFromConfig.ts

@@ -0,0 +1,311 @@
+export interface Mapping {
+	fieldName: string;
+	jsonPath: string;
+	jsonValuePath: string;
+	format: string;
+	inputTypeCode?: string;
+}
+
+export function parseWithMappings(
+	input: { json: Record<string, unknown> },
+	mappings: Mapping[],
+): Record<string, unknown> {
+	const result: Record<string, unknown> = {};
+
+	for (const mapping of mappings) {
+		const { fieldName, jsonPath, format } = mapping;
+
+		const pathValue = resolvePath(input.json, jsonPath);
+		if (pathValue === undefined || pathValue === null) {
+			result[fieldName] = mapping.inputTypeCode === "input-table" ? [] : null;
+			continue;
+		}
+
+		const parsed = parseValueFromFormat(format, fieldName, pathValue);
+		const isEmptyForInputTable =
+			mapping.inputTypeCode === "input-table" &&
+			(parsed === "" ||
+				(typeof parsed === "object" &&
+					parsed !== null &&
+					!Array.isArray(parsed) &&
+					Object.keys(parsed).length === 0));
+		result[fieldName] = isEmptyForInputTable ? [] : parsed;
+	}
+
+	return result;
+}
+
+function stripPathPrefix(path: string): string {
+	if (path.startsWith("$.")) return path.slice(2);
+	if (path.startsWith("$")) return path.slice(1);
+	return path;
+}
+
+function walkSegment(current: unknown, segment: string | number): unknown {
+	if (typeof segment === "number") {
+		if (!Array.isArray(current)) return undefined;
+		return current[segment];
+	}
+	if (typeof current !== "object" || Array.isArray(current)) return undefined;
+	return (current as Record<string, unknown>)[segment];
+}
+
+/** Walks an object/array using a simple JSONPath expression (dot + bracket notation). */
+function resolvePath(obj: unknown, path: string): unknown {
+	if (path === "$") return obj;
+
+	const stripped = stripPathPrefix(path);
+	if (!stripped) return obj;
+
+	let current: unknown = obj;
+	for (const segment of parsePathSegments(stripped)) {
+		if (current === null || current === undefined) return undefined;
+		current = walkSegment(current, segment);
+	}
+	return current;
+}
+
+/** Splits a stripped JSONPath string into typed segments, e.g. "Processes[0].ProcessTasks[1].Name" */
+function parsePathSegments(path: string): (string | number)[] {
+	const segments: (string | number)[] = [];
+	const regex = /([^.[\]]+)|\[(\d+)\]/g;
+	let match: RegExpExecArray | null;
+	while ((match = regex.exec(path)) !== null) {
+		if (match[1] !== undefined) segments.push(match[1]);
+		else if (match[2] !== undefined)
+			segments.push(Number.parseInt(match[2], 10));
+	}
+	return segments;
+}
+
+/**
+ * Applies the format string to the extracted value.
+ * - If format is exactly `{0}` or `{fieldName}`, the raw value is returned as-is.
+ * - Otherwise `{0}` / `{fieldName}` tokens are replaced with the stringified value.
+ *   If the result is valid JSON it is parsed back to an object.
+ */
+function toValueString(value: unknown): string {
+	if (value == null) return "";
+	if (typeof value === "string") return value;
+	if (
+		typeof value === "number" ||
+		typeof value === "boolean" ||
+		typeof value === "bigint"
+	)
+		return String(value);
+	if (typeof value === "object") return JSON.stringify(value);
+	return "";
+}
+
+function escapeRegex(str: string): string {
+	return str.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
+}
+
+function findPlaceholderInArray(
+	arr: unknown[],
+	placeholder: string,
+): string[] | null {
+	for (let i = 0; i < arr.length; i++) {
+		const path = findPlaceholderPath(arr[i], placeholder);
+		if (path !== null) return [String(i), ...path];
+	}
+	return null;
+}
+
+function findPlaceholderInObject(
+	obj: Record<string, unknown>,
+	placeholder: string,
+): string[] | null {
+	for (const [key, val] of Object.entries(obj)) {
+		const path = findPlaceholderPath(val, placeholder);
+		if (path !== null) return [key, ...path];
+	}
+	return null;
+}
+
+/**
+ * Recursively searches an object/array for the first occurrence of `placeholder`
+ * as a string value, returning the key path to it, or `null` if not found.
+ */
+function findPlaceholderPath(
+	obj: unknown,
+	placeholder: string,
+): string[] | null {
+	if (typeof obj === "string") return obj === placeholder ? [] : null;
+	if (Array.isArray(obj)) return findPlaceholderInArray(obj, placeholder);
+	if (typeof obj === "object" && obj !== null) {
+		return findPlaceholderInObject(obj as Record<string, unknown>, placeholder);
+	}
+	return null;
+}
+
+function navigatePath(obj: unknown, path: string[]): unknown {
+	let current: unknown = obj;
+	for (const key of path) {
+		if (current === null || current === undefined) return undefined;
+		if (Array.isArray(current)) {
+			current = current[Number(key)];
+		} else if (typeof current === "object") {
+			current = (current as Record<string, unknown>)[key];
+		} else {
+			return undefined;
+		}
+	}
+	return current;
+}
+
+/**
+ * Like findPlaceholderPath but matches any string leaf that CONTAINS the placeholder
+ * as a substring rather than being exactly equal to it.
+ */
+function findContainingInArray(
+	arr: unknown[],
+	placeholder: string,
+): string[] | null {
+	for (let i = 0; i < arr.length; i++) {
+		const path = findContainingPath(arr[i], placeholder);
+		if (path !== null) return [String(i), ...path];
+	}
+	return null;
+}
+
+function findContainingInObject(
+	obj: Record<string, unknown>,
+	placeholder: string,
+): string[] | null {
+	for (const [key, val] of Object.entries(obj)) {
+		const path = findContainingPath(val, placeholder);
+		if (path !== null) return [key, ...path];
+	}
+	return null;
+}
+
+function findContainingPath(
+	obj: unknown,
+	placeholder: string,
+): string[] | null {
+	if (typeof obj === "string") return obj.includes(placeholder) ? [] : null;
+	if (Array.isArray(obj)) return findContainingInArray(obj, placeholder);
+	if (typeof obj === "object" && obj !== null)
+		return findContainingInObject(obj as Record<string, unknown>, placeholder);
+	return null;
+}
+
+/**
+ * Reverse of `applyFormat`: given a format string containing `{0}` and a value
+ * that was produced by that format, extracts and returns the original `{0}` value.
+ *
+ * For JSON formats (e.g. `{ "ConnectionName": "{0}" }`): parses both the format and
+ * the value as JSON, locates the key path of `{0}` in the format structure, then
+ * extracts the value at that same path from the actual value. This correctly handles
+ * values with extra keys not present in the format template.
+ *
+ * When the placeholder is embedded within a format leaf string
+ * (e.g. `{ "Sql": "exec {0}" }`), navigates to that leaf in the actual value
+ * and applies regex capture within that field.
+ *
+ * For non-JSON formats (e.g. `"{0}_entity"`): falls back to regex capture.
+ *
+ * Returns `null` when no match is found.
+ */
+function extractViaJsonFormat(
+	format: string,
+	placeholder0: string,
+	placeholderField: string,
+	formattedValue: unknown,
+): unknown {
+	let parsedFormat: unknown;
+	try {
+		parsedFormat = JSON.parse(format);
+	} catch {
+		return undefined;
+	}
+
+	let parsedValue: unknown = formattedValue;
+	if (typeof formattedValue === "string") {
+		try {
+			parsedValue = JSON.parse(formattedValue);
+		} catch {
+			/* use as-is */
+		}
+	}
+
+	// Exact match: the format leaf IS the placeholder
+	const exactPath =
+		findPlaceholderPath(parsedFormat, placeholder0) ??
+		findPlaceholderPath(parsedFormat, placeholderField);
+	if (exactPath !== null) {
+		return navigatePath(parsedValue, exactPath);
+	}
+
+	// Embedded match: the placeholder appears inside a format leaf string
+	const containingPath =
+		findContainingPath(parsedFormat, placeholder0) ??
+		findContainingPath(parsedFormat, placeholderField);
+	if (containingPath === null) return undefined;
+
+	const formatLeaf = navigatePath(parsedFormat, containingPath);
+	if (typeof formatLeaf !== "string") return undefined;
+
+	return extractViaRegex(
+		formatLeaf,
+		placeholder0,
+		placeholderField,
+		navigatePath(parsedValue, containingPath),
+	);
+}
+
+function extractViaRegex(
+	format: string,
+	placeholder0: string,
+	placeholderField: string,
+	formattedValue: unknown,
+): unknown {
+	const segments = format.includes(placeholder0)
+		? format.split(placeholder0)
+		: format.split(placeholderField);
+
+	if (segments.length === 1) return null;
+
+	const captureGroup = String.raw`([\s\S]*?)`;
+	const regexSource = segments.map(escapeRegex).join(captureGroup);
+	const match = new RegExp(`^${regexSource}$`).exec(
+		toValueString(formattedValue).trim(),
+	);
+	if (!match) return null;
+
+	const captured = match[1];
+	try {
+		return JSON.parse(captured);
+	} catch {
+		return captured;
+	}
+}
+
+export function parseValueFromFormat(
+	format: string,
+	fieldName: string,
+	formattedValue: unknown,
+): unknown {
+	if (format === "{0}" || format === `{${fieldName}}`) {
+		return formattedValue;
+	}
+
+	const placeholder0 = "{0}";
+	const placeholderField = `{${fieldName}}`;
+
+	const jsonResult = extractViaJsonFormat(
+		format,
+		placeholder0,
+		placeholderField,
+		formattedValue,
+	);
+	if (jsonResult !== undefined) return jsonResult;
+
+	return extractViaRegex(
+		format,
+		placeholder0,
+		placeholderField,
+		formattedValue,
+	);
+}

package/src/components/templatesV2/wizard.tsx

@@ -21,6 +21,10 @@ import {
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useRef, useState } from "react";
 import { applyTemplateConfig, InputType } from "./inputs";
+import {
+	parseWithMappings,
+	type Mapping,
+} from "./utils/parseTemplateValuesFromConfig";
 import PageForm from "./pageForm";
 import {
 	type FieldValue,
@@ -277,7 +281,8 @@ function PageNav({
 
 interface Props {
 	readonly metadata: Metadata;
-	readonly processTemplateGroupId?: string;
+	readonly sourceTemplateId?: string;
+	readonly targetTemplateId?: string;
 	readonly processTemplateId?: string;
 	readonly handleBack?: (event?: React.MouseEventHandler) => void;
 	readonly handleFinish?: (event?: React.MouseEventHandler) => void;
@@ -290,6 +295,7 @@ interface Props {
 	readonly isCreateMode?: boolean;
 	readonly readOnly?: boolean;
 	readonly sharedCount?: (count: number) => void;
+	readonly config: Record<string, unknown>;
 }
 
 export default function Wizard({ metadata, sharedCount, ...props }: Props) {
@@ -304,11 +310,54 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 
 	const { data, isLoading } = getProcessTemplate.useData({
 		input: {
-			processTemplateGroupId: props.processTemplateGroupId || null,
-			processTemplateId: props.processTemplateId || null,
+			sourceTemplateId: props.sourceTemplateId || null,
+			targetTemplateId: props.targetTemplateId || null,
 		},
 	});
 
+	const parsedTemplateConfigs = React.useMemo((): Array<
+		Record<string, unknown>
+	> => {
+		if (props.config == null) return [];
+		type TemplateEntry = {
+			id?: unknown;
+			processTemplateId?: unknown;
+			mappings?: unknown[];
+		};
+		const allTemplates =
+			(data as { processTemplate?: TemplateEntry[] })?.processTemplate ?? [];
+		return allTemplates.flatMap((template) => {
+			const mappings = (template?.mappings ?? []) as Mapping[];
+			if (!mappings.length) return [];
+			const processTemplateId = template?.processTemplateId ?? template?.id;
+			return [
+				{
+					...parseWithMappings(
+						props.config as { json: Record<string, unknown> },
+						mappings,
+					),
+					processTemplateId,
+				},
+			];
+		});
+	}, [data, props.config]);
+
+	const parsedTemplateConfigString = React.useMemo(
+		() =>
+			parsedTemplateConfigs.length > 0
+				? JSON.stringify(parsedTemplateConfigs[0])
+				: null,
+		[parsedTemplateConfigs],
+	);
+
+	const parsedAllTemplateConfigsString = React.useMemo(
+		() =>
+			parsedTemplateConfigs.length > 0
+				? JSON.stringify(parsedTemplateConfigs)
+				: null,
+		[parsedTemplateConfigs],
+	);
+
 	const [initialValues, setInitialValues] = React.useState<FormState>({});
 	// aggregated form values across pages
 	const [aggregatedValues, setAggregatedValues] =
@@ -340,7 +389,6 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 		const typedData = data as GetProcessTemplateQuery;
 		if (typedData?.processTemplate) {
 			const templates = typedData.processTemplate as ProcessTemplate[];
-
 			setTemplates(templates);
 			setTemplatesSorted(
 				templates.map((t) => ({
@@ -425,12 +473,12 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 	);
 
 	useEffect(() => {
-		if (props.templateConfig) {
-			const config = JSON.parse(props.templateConfig);
+		if (!parsedAllTemplateConfigsString) return;
+		for (const config of parsedTemplateConfigs) {
 			applyTemplateConfig(
 				{
-					name: config.taskName as string,
-					templateConfig: props.templateConfig,
+					name: "",
+					templateConfig: JSON.stringify(config),
 				} as SearchOption,
 				(templateId: string, fieldName: string, value: FieldValue) => {
 					const key = templateFieldKey(templateId, fieldName);
@@ -438,7 +486,7 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 				},
 			);
 		}
-	}, [props.templateConfig]);
+	}, [parsedAllTemplateConfigsString]);
 
 	const clearTemplateFields = (templateId: string) => {
 		setAggregatedValues((prev) => {
@@ -600,8 +648,9 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 		isLoading &&
 		!currentFlat &&
 		!currentTemplate &&
-		!props.templateConfig &&
-		(!props.processTemplateGroupId || !props.processTemplateId);
+		!parsedTemplateConfigString &&
+		!props.sourceTemplateId &&
+		!props.targetTemplateId;
 	if (showLoading) {
 		return (
 			<Box sx={{ padding: theme.spacing(10, 3) }}>
@@ -676,7 +725,7 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 							isCreateMode={props.isCreateMode}
 							disabledFields={disabledFields}
 							setFieldsDisabled={setFieldsDisabled}
-							templateConfig={props.templateConfig || ""}
+							templateConfig={parsedTemplateConfigString ?? ""}
 							setFieldValidationInProgress={setIsFieldValidationInProgress}
 							submitValidationResults={submitValidationResults ?? undefined}
 						/>

package/src/pages/integration-create/integration-create.tsx

@@ -1,7 +1,8 @@
 import type {
 	ConfigExport,
 	ConfigImport,
-	ConfigurationMergeMutationVariables,
+	ConfigMerge,
+	InputMaybe,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import {
 	processConfigImport,
@@ -26,6 +27,7 @@ import SelectStep from "./select-step";
 import TemplateListStep, { DirectionType } from "./template-list-step";
 import TemplateOptionsStep from "./template-options-step";
 import WizardStep from "./wizard-step";
+import { TemplateOption } from "./template-options-step";
 
 export default function IntegrationCreate() {
 	const t = useTranslations("Integrate");
@@ -59,7 +61,17 @@ export default function IntegrationCreate() {
 	const [dualSourceThenTarget, setDualSourceThenTarget] = useState(false);
 
 	useEffect(() => {
-		if (searchParams.get("group")) {
+		const templateOption = searchParams.get("option");
+
+		if (
+			(templateOption === TemplateOption.Source &&
+				searchParams.get(DirectionType.Incoming)) ||
+			(templateOption === TemplateOption.Target &&
+				searchParams.get(DirectionType.Outgoing)) ||
+			(templateOption === TemplateOption.SourceAndTarget &&
+				searchParams.get(DirectionType.Incoming) &&
+				searchParams.get(DirectionType.Outgoing))
+		) {
 			setStep(INTEGRATION_CREATE_STEPS.wizard);
 		}
 	}, [searchParams]);
@@ -93,32 +105,31 @@ export default function IntegrationCreate() {
 			c.code = code;
 		}
 
-		console.log("configMergeInput", configMergeInput);
+		const templateOption = searchParams.get("option");
 
-		const sourceName = configMergeInput?.input?.config?.find(
-			(item) => (item?.source as string)?.toLowerCase() === "source",
-		)?.uniqueIdentifier;
+		let sourceConfig: InputMaybe<ConfigMerge> | undefined = null;
+		let targetConfig: InputMaybe<ConfigMerge> | undefined = null;
+		let targetSourcesConfig: InputMaybe<ConfigMerge> | undefined = null;
 
-		if (sourceName) {
-			configMergeInput.input.config = configMergeInput.input.config.map(
-				(item) => {
-					if (item?.queues) {
-						return {
-							...item,
-							queues: `${sourceName}_endpoint`,
-						};
-					} else {
-						return item;
-					}
-				},
-			);
+		const mergedInput = removeTemplateConfig(newProcessConfigMerge?.input) as
+			| { config: Array<Record<string, unknown>> }
+			| undefined;
+
+		if (templateOption === TemplateOption.SourceAndTarget) {
+			sourceConfig = (mergedInput?.config?.[0] ?? null) as ConfigMerge | null;
+			targetConfig = (mergedInput?.config?.[1] ?? null) as ConfigMerge | null;
+		} else if (templateOption === TemplateOption.Source) {
+			sourceConfig = (mergedInput?.config?.[0] ?? null) as ConfigMerge | null;
+		} else if (templateOption === TemplateOption.Target) {
+			targetSourcesConfig = (mergedInput?.config?.[0] ??
+				null) as ConfigMerge | null;
+			targetConfig = (mergedInput?.config?.[1] ?? null) as ConfigMerge | null;
 		}
 
 		processConfigMergeMutation.mutate(
 			{
-				input:
-					removeTemplateConfig(newProcessConfigMerge?.input) ||
-					({} as ConfigurationMergeMutationVariables),
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				input: { sourceConfig, targetConfig, targetSourcesConfig } as any,
 			},
 			{
 				onSuccess: ({ configurationMerge }) => {
@@ -236,23 +247,20 @@ export default function IntegrationCreate() {
 				<TemplateListStep
 					listStepTitle={t("Templates.SelectSource")}
 					directionType={DirectionType.Incoming}
-					onSelectTemplate={
-						dualSourceThenTarget
-							? (id) => {
-									const p = new URLSearchParams(searchParams.toString());
-									p.set(`${t("Templates.sourceGroup")}`, id);
-									p.delete(`${t("Templates.group")}`);
-									router.replace(`${pathname}?${p}`);
-									setStep(INTEGRATION_CREATE_STEPS.targetTemplateList);
-								}
-							: undefined
-					}
+					onSelectTemplate={() => {
+						if (dualSourceThenTarget)
+							setStep(INTEGRATION_CREATE_STEPS.targetTemplateList);
+						//else setStep(INTEGRATION_CREATE_STEPS.wizard)
+					}}
 				/>
 			)}
 			{step === INTEGRATION_CREATE_STEPS.targetTemplateList && (
 				<TemplateListStep
 					listStepTitle={t("Templates.SelectTarget")}
 					directionType={DirectionType.Outgoing}
+					// onSelectTemplate={
+					// 	()=>setStep(INTEGRATION_CREATE_STEPS.wizard)
+					// }
 				/>
 			)}
 			{/* </Card> */}

package/src/pages/integration-create/template-list-step.tsx

@@ -1,8 +1,8 @@
 import type {
 	FilterQueryInput,
-	GetProcessTemplateGroupsQuery,
+	GetProcessTemplatesQuery,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-import { getProcessTemplateGroups } from "@evenicanpm/admin-integrate/api/templates/queries";
+import { getProcessTemplates } from "@evenicanpm/admin-integrate/api/templates/queries";
 import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import TemplatesList from "@evenicanpm/admin-integrate/components/templatesV2/templates-list";
 import { Box, Typography, useTheme } from "@mui/material";
@@ -17,12 +17,12 @@ export enum DirectionType {
 
 interface Props {
 	listStepTitle?: string;
-	directionType?: DirectionType;
+	directionType: DirectionType;
 	/** When set, skips default `group` URL handoff (e.g. source pick in dual flow). */
 	onSelectTemplate?: (id: string) => void;
 }
 
-export default function TemplateListStep(props?: Props) {
+export default function TemplateListStep(props: Props) {
 	const t = useTranslations("Integrate.Templates");
 
 	const router = useRouter();
@@ -62,18 +62,15 @@ export default function TemplateListStep(props?: Props) {
 		skip: 0,
 	});
 
-	const { data, isLoading } = getProcessTemplateGroups.useData({
+	const { data, isLoading } = getProcessTemplates.useData({
 		input: input,
 	});
 
 	const handleRedirect = (id: string) => {
-		if (props?.onSelectTemplate) {
-			props.onSelectTemplate(id);
-			return;
-		}
 		const currentParams = new URLSearchParams(searchParams.toString());
-		currentParams.set("group", id);
+		currentParams.set(props.directionType, id);
 		router.replace(`${pathname}?${currentParams.toString()}`);
+		if (props?.onSelectTemplate) props.onSelectTemplate(id);
 	};
 
 	return (
@@ -89,13 +86,11 @@ export default function TemplateListStep(props?: Props) {
 			</Box>
 			<TemplatesList
 				heading={heading}
-				data={data as GetProcessTemplateGroupsQuery}
+				data={data as GetProcessTemplatesQuery}
 				loading={isLoading}
-				// input={{ ...input, directionType: props?.directionType }}
 				input={input}
 				setInput={setInput}
 				handleRedirect={handleRedirect}
-				isTemplateGroupsList
 			/>
 		</Box>
 	);

package/src/pages/integration-create/template-options-step.tsx

@@ -12,6 +12,13 @@ import {
 import { useTranslations } from "next-intl";
 import type React from "react";
 import { INTEGRATION_CREATE_STEPS } from "./integration-create-steps";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+export enum TemplateOption {
+	Source = "source",
+	Target = "target",
+	SourceAndTarget = "both",
+}
 
 interface Props {
 	setStep: React.Dispatch<React.SetStateAction<number>>;
@@ -24,14 +31,27 @@ export default function TemplateOptionsStep(props: Props) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	const handleClickOption1 = () => {
-		props.onSourceAndTarget?.();
-		props.setStep(INTEGRATION_CREATE_STEPS.sourceTemplateList);
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+
+	const handleClickOption = (option: TemplateOption) => {
+		switch (option) {
+			case TemplateOption.SourceAndTarget:
+				props.onSourceAndTarget?.();
+				props.setStep(INTEGRATION_CREATE_STEPS.sourceTemplateList);
+				break;
+			case TemplateOption.Source:
+				props.setStep(INTEGRATION_CREATE_STEPS.sourceTemplateList);
+				break;
+			case TemplateOption.Target:
+				props.setStep(INTEGRATION_CREATE_STEPS.targetTemplateList);
+		}
+
+		const currentParams = new URLSearchParams(searchParams.toString());
+		currentParams.set("option", option);
+		router.replace(`${pathname}?${currentParams.toString()}`);
 	};
-	const handleClickOption2 = () =>
-		props.setStep(INTEGRATION_CREATE_STEPS.sourceTemplateList);
-	const handleClickOption3 = () =>
-		props.setStep(INTEGRATION_CREATE_STEPS.targetTemplateList);
 
 	return (
 		<Box sx={styles.main}>
@@ -45,7 +65,7 @@ export default function TemplateOptionsStep(props: Props) {
 					<LinkCard
 						title={t("templateOption1")}
 						description={t("templateOption1Description")}
-						onClick={handleClickOption1}
+						onClick={() => handleClickOption(TemplateOption.SourceAndTarget)}
 					>
 						<Box
 							sx={{
@@ -62,7 +82,7 @@ export default function TemplateOptionsStep(props: Props) {
 					<LinkCard
 						title={t("templateOption2")}
 						description={t("templateOption2Description")}
-						onClick={handleClickOption2}
+						onClick={() => handleClickOption(TemplateOption.Source)}
 					>
 						<Box
 							sx={{
@@ -79,7 +99,7 @@ export default function TemplateOptionsStep(props: Props) {
 					<LinkCard
 						title={t("templateOption3")}
 						description={t("templateOption3Description")}
-						onClick={handleClickOption3}
+						onClick={() => handleClickOption(TemplateOption.Target)}
 					>
 						<Box
 							sx={{

package/src/pages/integration-create/wizard-step.tsx

@@ -8,6 +8,8 @@ import { Box } from "@mui/material";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { INTEGRATION_CREATE_STEPS } from "./integration-create-steps";
 
+import { DirectionType } from "./template-list-step";
+
 const metadata = {
 	name: "",
 	code: "",
@@ -37,14 +39,26 @@ export default function WizardStep(props: Readonly<Props>) {
 		router.replace(pathname);
 	};
 
+	console.log(
+		"SEARHCPARAMS",
+		searchParams.get(DirectionType.Incoming)?.toString(),
+	);
+	console.log(
+		"SEARHCPARAMS",
+		searchParams.get(DirectionType.Outgoing)?.toString(),
+	);
+
 	return (
 		<Box>
 			<Wizard
 				metadata={metadata}
-				processTemplateGroupId={searchParams.get("group")?.toString()}
+				// processTemplateGroupId={}
+				sourceTemplateId={searchParams.get(DirectionType.Incoming)?.toString()}
+				targetTemplateId={searchParams.get(DirectionType.Outgoing)?.toString()}
 				handleBack={handleBack}
 				handleFinish={handleFinish}
 				setProcessConfigMerge={props.setProcessConfigMerge}
+				config={{}}
 				isCreateMode
 			/>
 		</Box>

package/src/pages/integration-details/integration-details.tsx

@@ -37,22 +37,22 @@ import {
 	taskReducer,
 } from "./task-drawer/task-reducer";
 
-function mergeByKey(
+function mergeByKey<T>(
 	keyFields: string | string[],
-	arr1: any[] = [],
-	arr2: any[] = [],
-) {
+	arr1: T[] = [],
+	arr2: T[] = [],
+): T[] {
 	const keys = Array.isArray(keyFields) ? keyFields : [keyFields];
 
 	// Build lookup maps for each key -> value => baseItem (from arr1)
-	const lookupByKey: Record<string, Map<any, any>> = {};
+	const lookupByKey: Record<string, Map<unknown, T>> = {};
 	for (const k of keys) {
 		lookupByKey[k] = new Map();
 	}
 
 	for (const item of arr1) {
 		for (const key of keys) {
-			const val = item?.[key];
+			const val = (item as Record<string, unknown> | null | undefined)?.[key];
 			if (val !== undefined && val !== null) {
 				lookupByKey[key].set(val, item);
 			}
@@ -60,28 +60,29 @@ function mergeByKey(
 	}
 
 	// Use a Set to preserve insertion order and ensure uniqueness
-	const resultSet = new Set<any>(arr1);
+	const resultSet = new Set<T>(arr1);
 
 	for (const item of arr2) {
-		let matchedBase: any = null;
+		let matchedBase: T | undefined;
 
 		// Try keys in order of priority
 		for (const key of keys) {
-			const val = item?.[key];
+			const val = (item as Record<string, unknown> | null | undefined)?.[key];
 			if (val !== undefined && val !== null) {
 				const candidate = lookupByKey[key].get(val);
-				if (candidate) {
+				if (candidate !== undefined) {
 					matchedBase = candidate;
 					break;
 				}
 			}
 		}
 
-		if (matchedBase) {
+		if (matchedBase !== undefined) {
 			// Merge properties from item into matched base (respecting exclusions)
-			for (const prop of Object.keys(item)) {
+			const itemRecord = item as Record<string, unknown> | null | undefined;
+			for (const prop of Object.keys(itemRecord ?? {})) {
 				if (prop !== "Sort" && prop !== "ParallelProcessingGroup") {
-					matchedBase[prop] = item[prop];
+					(matchedBase as Record<string, unknown>)[prop] = itemRecord?.[prop];
 				}
 			}
 		} else {
@@ -89,7 +90,7 @@ function mergeByKey(
 			resultSet.add(item);
 			// Register the newly added item in lookups so subsequent arr2 items can match it
 			for (const key of keys) {
-				const val = item?.[key];
+				const val = (item as Record<string, unknown> | null | undefined)?.[key];
 				if (val !== undefined && val !== null) {
 					lookupByKey[key].set(val, item);
 				}
@@ -175,7 +176,9 @@ export default function IntegrationDetails() {
 		//setConfig(newConfig);
 
 		const configData: ConfigExport =
-			config ?? (configFromApi as any)?.configurationExport;
+			config ??
+			((configFromApi as ConfigurationExportQuery)
+				?.configurationExport as ConfigExport);
 
 		configData.DepotGroups = mergeByKey(
 			"DepotGroup",
@@ -287,7 +290,10 @@ export default function IntegrationDetails() {
 		}
 	}, [scheduleLoading]);
 
-	const onAdd = (data: any) => {
+	const onAdd = (data: {
+		sort?: number;
+		paralellelProcessingGroup?: string;
+	}) => {
 		dispatchTaskState({
 			type: TaskActionType.OPEN_ADD,
 			sort: data.sort,
@@ -314,14 +320,21 @@ export default function IntegrationDetails() {
 			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
 			<IntegrationDetailsHeader
 				name={
-					(config || (configFromApi as any)?.configurationExport)?.Processes[0]
-						?.Name || "Untitled Integration"
+					(
+						config ||
+						((configFromApi as ConfigurationExportQuery)
+							?.configurationExport as ConfigExport)
+					)?.Processes?.[0]?.Name || "Untitled Integration"
 				}
 				icon={details?.processById?.processIcon ?? ""}
 				setName={(name) => {
 					const configData =
-						config || (configFromApi as any)?.configurationExport;
-					configData.Processes[0].Name = name;
+						config ||
+						((configFromApi as ConfigurationExportQuery)
+							?.configurationExport as ConfigExport);
+					if (configData?.Processes?.[0]) {
+						configData.Processes[0].Name = name as string;
+					}
 					setConfig(configData);
 				}}
 				onImportClick={() => {
@@ -399,24 +412,54 @@ export default function IntegrationDetails() {
 								(ep) => !!ep && ep.Name === processTask.endpoint,
 							);
 
-							let templateConfig: any;
-
-							if (endpoint) {
-								if (typeof endpoint.TemplateConfig === "string") {
-									templateConfig = endpoint.TemplateConfig;
-								} else if (typeof endpoint.TemplateConfig === "object") {
-									templateConfig = JSON.stringify(endpoint.TemplateConfig);
+							let filteredConfig: ConfigExport | null =
+								config ||
+								(configFromApi as ConfigurationExportQuery)?.configurationExport
+									? JSON.parse(
+											JSON.stringify(
+												config ||
+													(configFromApi as ConfigurationExportQuery)
+														?.configurationExport,
+											),
+										)
+									: null;
+
+							if (filteredConfig?.Processes?.[0]) {
+								filteredConfig.Processes[0].ProcessTasks =
+									filteredConfig.Processes[0].ProcessTasks?.filter(
+										(task) =>
+											!!task &&
+											Number.parseInt(task.ProcessTaskId ?? "") ===
+												Number.parseInt(processTask.id),
+									) || [];
+
+								filteredConfig.Endpoints =
+									filteredConfig.Endpoints?.filter(
+										(ep) => !!ep && ep.Name === processTask.endpoint,
+									) || [];
+
+								if ((filteredConfig.Endpoints?.length ?? 0) > 0 && endpoint) {
+									filteredConfig.Entities =
+										filteredConfig.Entities?.filter(
+											(entity) =>
+												!!entity &&
+												entity.Name === filteredConfig?.Endpoints?.[0]?.Entity,
+										) || [];
 								}
 							}
 
+							console.log("filtered down Config", filteredConfig);
+
 							dispatchTaskState({
 								type: TaskActionType.OPEN_EDIT,
 								processTaskId: processTask.id,
-								templateConfig: templateConfig,
+								//templateConfig: templateConfig,
+								config: filteredConfig,
 								sort: processTask.sort,
 								parallelProcessingGroup: processTask.parallelProcessingGroup,
-								processTemplateId: endpoint?.ProcessTemplateId,
+								processTemplateId: processTask.processTemplateId,
 								name: processTask.name,
+								directionTypeId: processTask.directionTypeId,
 							} as EditAction);
 						}}
 						drawerOpen={taskState.open}
@@ -437,7 +480,11 @@ export default function IntegrationDetails() {
 					renderKey={taskState.processTaskId ?? 0}
 					dispatch={dispatchTaskState}
 					handleUpdateConfig={handleUpdateConfig}
-					config={config ?? (configFromApi as any)?.configurationExport}
+					config={
+						config ??
+						((configFromApi as ConfigurationExportQuery)
+							?.configurationExport as ConfigExport)
+					}
 				/>
 			</Box>
 			<ScheduleDrawer

package/src/pages/integration-details/task-drawer/add-task.tsx

@@ -160,6 +160,7 @@ export default function AddTask(props: Readonly<Props>) {
 					isCreateMode
 					handleBack={handleBack}
 					handleFinish={handleNext}
+					config={{}}
 				/>
 			)}
 			{props.taskState.step === 2 && (

package/src/pages/integration-details/task-drawer/edit-task.tsx

@@ -1,7 +1,6 @@
 import type {
 	ConfigExport,
 	ConfigurationMergeMutation,
-	ConfigurationMergeMutationVariables,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { processConfigMerge } from "@evenicanpm/admin-integrate/api/process-config/mutation";
 import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
@@ -63,12 +62,21 @@ export default function EditTask(props: Readonly<Props>) {
 
 	useEffect(() => {
 		if (processConfigMergeInput) {
-			const input =
-				removeTemplateConfig(processConfigMergeInput?.input) ||
-				({} as ConfigurationMergeMutationVariables);
+			const input = (removeTemplateConfig(processConfigMergeInput?.input) ||
+				{}) as {
+				config: Array<Record<string, unknown>>;
+			};
 			processConfigMergeMutation.mutate(
 				{
-					input: input,
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					input: {
+						sourceConfig:
+							props.taskState.directionTypeId === 0 ? input?.config[0] : null,
+						targetConfig:
+							props.taskState.directionTypeId === 1 ? input?.config[1] : null,
+						targetSourcesConfig:
+							props.taskState.directionTypeId === 1 ? input?.config[0] : null,
+					} as any,
 				},
 				{
 					onSuccess: async (data: ConfigurationMergeMutation) => {
@@ -143,13 +151,24 @@ export default function EditTask(props: Readonly<Props>) {
 						setProcessConfigMerge={setProcessConfigMergeInput}
 						handleBack={handleBack}
 						handleFinish={handleFinish}
-						templateConfig={props.taskState.templateConfig}
+						//templateConfig={props.taskState.templateConfig}
 						processTemplateId={props.taskState.processTemplateId as string}
 						isEditMode
 						isCreateMode={false}
 						disableBackToTemplates
 						readOnly={!props.editable}
 						sharedCount={(count: number) => setSharedCount(count)}
+						sourceTemplateId={
+							(props.taskState.directionTypeId as number) == 0
+								? props.taskState.processTemplateId
+								: undefined
+						}
+						targetTemplateId={
+							(props.taskState.directionTypeId as number) == 1
+								? props.taskState.processTemplateId
+								: undefined
+						}
+						config={{ json: props.taskState.config as Record<string, unknown> }}
 					/>
 				)}
 			{props.taskState.step === 1 && (

package/src/pages/integration-details/task-drawer/task-reducer.ts

@@ -23,6 +23,8 @@ export interface EditAction extends TaskAction {
 	parallelProcessingGroup?: number;
 	processTemplateId?: string;
 	name?: string;
+	directionTypeId?: number;
+	config?: object;
 }
 
 export interface TaskState {
@@ -35,6 +37,8 @@ export interface TaskState {
 	parallelProcessingGroup?: number;
 	processTemplateId?: string;
 	name?: string;
+	directionTypeId?: number;
+	config?: object | null;
 }
 
 export function taskReducer(state: TaskState, action: TaskAction): TaskState {
@@ -69,6 +73,8 @@ export function taskReducer(state: TaskState, action: TaskAction): TaskState {
 				parallelProcessingGroup: (action as EditAction).parallelProcessingGroup,
 				processTemplateId: (action as EditAction).processTemplateId,
 				name: (action as EditAction).name,
+				directionTypeId: (action as EditAction).directionTypeId,
+				config: (action as EditAction).config,
 			};
 		}
 		case TaskActionType.INCREMENT_STEP: {