datastake-daf 0.6.263 → 0.6.264

package/src/@daf/core/components/EditForm/form.jsx

@@ -1,9 +1,13 @@
 import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types'
 import { Form, Button, Alert, Space } from "antd";
-import dot from "dot-object";
+import dot from 'dot-object';
 import { renderNestedInputs } from "./RenderForm";
-import { GetFormItem, getFormTitles, showHideInput } from "./helper";
+import {
+  GetFormItem,
+  getFormTitles,
+  showHideInput
+} from "./helper";
 // import dayjs from "dayjs";
 import AjaxSubGroup from "./components/AjaxSubGroup";
 import { propHasValue } from "../../../../helpers/deepFind";
@@ -13,647 +17,573 @@ import { convertToDayJs } from "../../../utils/date";
 import { convertUndefinedToNull } from "../../../utils/object";
 
 export const EditForm = ({
-	isReview,
-	highlightMandatory,
-	onValuesChange = () => {},
-	form,
-	data,
-	allData = {},
-	excludedKeys: defaultExcludedKeys = [],
-	disabledInputs = [],
-	checkDuplicates = true,
-	plainForms = {},
-	linkingForms = {},
-	onSubmit = () => {},
-	onCancel = () => {},
-	isModal = false,
-	breadcrumb = null,
-	definition = null,
-	subGroupTitle,
-	MainForm,
-	template = null,
-	loading = false,
-	setLoading = () => {},
-	inputsMeta = {},
-	changeInputMeta = () => {},
-	changeLinking = () => {},
-	// TODO: add this
-	t = (s) => s,
-	user,
-	ajaxForms,
-	ajaxOptions,
-	getMainApiUrl,
-	getAppHeader,
-	getApiBaseUrl,
-	changeAjaxOptions,
-	app,
-	query,
-	goTo,
-	changeAjaxForms,
-	errors = {},
-	changeErrors = () => {},
-	evaluationConfig = [],
-	staticWidth = "614px",
+  isReview,
+  highlightMandatory,
+  onValuesChange = () => { },
+  form,
+  data,
+  allData = {},
+  excludedKeys: defaultExcludedKeys = [],
+  disabledInputs = [],
+  checkDuplicates = true,
+  plainForms = {},
+  linkingForms = {},
+  onSubmit = () => { },
+  onCancel = () => { },
+  isModal = false,
+  breadcrumb = null,
+  definition = null,
+  subGroupTitle,
+  MainForm,
+  template = null,
+  loading = false,
+  setLoading = () => { },
+  inputsMeta = {},
+  changeInputMeta = () => { },
+  changeLinking = () => { },
+  // TODO: add this
+  t = (s) => s,
+  user,
+  ajaxForms,
+  ajaxOptions,
+  getMainApiUrl,
+  getAppHeader,
+  getApiBaseUrl,
+  changeAjaxOptions,
+  app,
+  query,
+  goTo,
+  changeAjaxForms,
+  errors = {},
+  changeErrors = () => { },
+  evaluationConfig = [],
+  staticWidth = '614px',
 }) => {
-	const [isSubmitting] = useState(false);
-	const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}));
-	const allFormData = JSON.parse(JSON.stringify(allData || {}));
-	// const [MainForm] = Form.useForm();
-	const [values, setValues] = useState(formData || {});
-	const [addressData, setAddress] = useState({});
-	const { id, options = {}, introText, formTitles, formClass = "" } = form || {};
-	const excludedKeys = [
-		...defaultExcludedKeys,
-		"icon",
-		"label",
-		"description",
-		"showFormIf",
-		"sectionLabel",
-		"formDescription",
-		"introText",
-		"formClass",
-		"alertConf",
-		"formTitles",
-		"position",
-		"id",
-	];
-	const [initialValues, setInitialValues] = useState(undefined);
+  const [isSubmitting] = useState(false);
+  const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}))
+  const allFormData = JSON.parse(JSON.stringify(allData || {}))
+  // const [MainForm] = Form.useForm();
+  const [values, setValues] = useState(formData || {});
+  const [addressData, setAddress] = useState({});
+  const { id, options = {}, introText, formTitles, formClass = '' } = form || {};
+  const excludedKeys = [
+    ...defaultExcludedKeys,
+    'icon', 'label', 'description', 'showFormIf', 'sectionLabel', 'formDescription', 'introText', 'formClass', 'alertConf', 'formTitles', 'position', 'id'
+  ]
+  const [initialValues, setInitialValues] = useState(undefined);
 
-	const getData = (name, input, value, commentValue, path, disabledPath) => {
-		const props = {
-			// placeholder: input.placeholder ? input.placeholder : getInputLabel(input, values, true),
-			placeholder: input.placeholder,
-			valueplaceholder: input.valueLabel || null,
-			disabled: input.disabled || false,
-			accept: input.accept || undefined,
-		};
-		const shouldForceEnable = initialValues?.[name] === null; //MIGHT_CHANGE_LATER TESTING
+  const getData = (name, input, value, commentValue, path, disabledPath) => {
+    const props = {
+      // placeholder: input.placeholder ? input.placeholder : getInputLabel(input, values, true),
+      placeholder: input.placeholder,
+      valueplaceholder: input.valueLabel || null,
+      disabled: input.disabled || false,
+      accept: input.accept || undefined,
+    }
+    const shouldForceEnable = initialValues?.[name] === null; //MIGHT_CHANGE_LATER TESTING
 
-		const isDisabled = shouldForceEnable
-			? false
-			: typeof input?.meta?.disableEdit === "object"
-			? input.meta.disableEdit.edit
-			: input?.meta?.disableEdit;
+    const isDisabled = shouldForceEnable
+		? false
+		: typeof input?.meta?.disableEdit === "object"
+		? input.meta.disableEdit.edit
+		: input?.meta?.disableEdit;
 
-		if (disabledInputs.includes(disabledPath) || isDisabled) {
-			props.disabled = true;
-		}
-		if (input.type === "total100" && !value) {
-			value = [
-				{
-					type: null,
-					value: null,
-				},
-			];
-		} else if (input.type === "date") {
-			// value = value ? typeof value === 'string' ? value : value.format('YYYY-MM-DD') : undefined;
-			value = convertToDayJs(value);
-		} else if (input.type === "year") {
-			// value = value ? dayjs(value) : undefined;
-			value = convertToDayJs(value);
-		} else if (input.type === "switch") {
-			if (!propHasValue(value)) {
-				value = value || false;
-				if (typeof path === "string") {
-					dot.str(path, value, values);
-				}
-			}
-		} else if (
-			input.type === "upload" ||
-			input.type === "imageUpload" ||
-			input.type === "videoUpload"
-		) {
-			const fileList =
-				(Array.isArray(value)
-					? value
-					: value &&
-					  typeof value === "object" &&
-					  value.fileList &&
-					  Array.isArray(value.fileList)
-					? value.fileList.map((f) => f.response).filter((f) => f)
-					: []) || [];
-			if (
-				!Array.isArray(value) &&
-				value &&
-				typeof value === "object" &&
-				value.fileList &&
-				Array.isArray(value.fileList)
-			) {
-				if (typeof path === "string") {
-					dot.set(path, fileList, values);
-				}
-			}
-			value = fileList;
-		} else if (input.type === "text") {
-			if (values[name] === null || (values[name] === undefined && input.meta?.defaultValue)) {
-				value = input.meta?.defaultValue;
-			}
-		} else if (input.type === "select") {
-			if (values[name] === null || (values[name] === undefined && input.meta?.defaultValue)) {
-				value = input.meta?.defaultValue;
-				setValues({
-					...values,
-					[name]: input.meta?.defaultValue,
-				});
-			}
-			if (data[name] === null || (data[name] === undefined && input.meta?.defaultValue)) {
-				MainForm.setFieldsValue({
-					[name]: input.meta?.defaultValue,
-				});
-			}
-		}
+    if (disabledInputs.includes(disabledPath) || isDisabled) {
+      props.disabled = true;
+    }
+    if (input.type === 'total100' && !value) {
+      value = [{
+        type: null,
+        value: null
+      }];
+    } else if (input.type === 'date') {
+      // value = value ? typeof value === 'string' ? value : value.format('YYYY-MM-DD') : undefined;
+      value = convertToDayJs(value)
+    } else if (input.type === 'year') {
+      // value = value ? dayjs(value) : undefined;
+      value = convertToDayJs(value)
+    }
+     else if (input.type === 'switch') {
+      if (!propHasValue(value)) {
+        value = value || false;
+        if (typeof path === 'string') {
+          dot.str(path, value, values);
+        }
+      }
+    } else if (input.type === 'upload' || input.type === 'imageUpload' || input.type === 'videoUpload') {
+      const fileList = (
+        Array.isArray(value) ? value :
+          (
+            value &&
+              typeof value === 'object' &&
+              value.fileList &&
+              Array.isArray(value.fileList) ?
+              value.fileList.map(f => f.response).filter(f => f) : []
+          )
+      ) || [];
+      if (!Array.isArray(value) && value &&
+        typeof value === 'object' &&
+        value.fileList &&
+        Array.isArray(value.fileList)) {
+        if (typeof path === 'string') {
+          dot.set(path, fileList, values);
+        }
+      }
+      value = fileList;
+    } else if (input.type === "text" ){
+      if(values[name] === null || values[name] === undefined && input.meta?.defaultValue){
+        value = input.meta?.defaultValue;
+      }
+    }
+    else if (input.type === "select" ){
+      if(values[name] === null || values[name] === undefined && input.meta?.defaultValue){
+        value = input.meta?.defaultValue;
+        setValues({
+          ...values,
+          [name]: input.meta?.defaultValue
+        })
+      }
+      if(data[name] === null || data[name] === undefined && input.meta?.defaultValue){
+        MainForm.setFieldsValue({
+          [name]: input.meta?.defaultValue
+        })
+      }
+    }
 
-		if (input.type === "modal") {
-			props.linkingform = {};
-			props.datalink = input.dataLink;
-			if (linkingForms[name]) {
-				props.linkingform = linkingForms[name];
-			}
-		}
+    if (input.type === 'modal') {
+      props.linkingform = {};
+      props.datalink = input.dataLink;
+      if (linkingForms[name]) {
+        props.linkingform = linkingForms[name];
+      }
+    }
 
-		const config = {
-			name,
-			input,
-			call: input?.meta?.call,
-			getFromLinking: input?.meta?.getFromLinking,
-			automaticallyLink: input.automaticallyLink,
-			props,
-			formsValue: values,
-			allFormsValue: allFormData,
-			onNewSetValue: input.onNewSetValue,
-			setValues,
-			onValuesChange,
-			changeLinking,
-			multiple: input?.meta?.multiple,
-			updateOptions: input.updateOptions || false,
-			options: input.options,
-			optionGroup: input.optionGroup,
-			optionsFilter: input?.meta?.optionsFilter,
-			filterCond: input?.meta?.filterCond,
-			disableOtherFields: input.disableOtherFields,
-			updateOtherFields: input.updateOtherFields,
-			repeatLabel: input.repeatLabel,
-			unique: checkDuplicates ? input.unique : undefined,
-			modalTitle: input.modalTitle,
-			buttonText: input.buttonText,
-			restricted: input.restricted || false,
-			totalMax: input.totalMax,
-			country: input.country || undefined,
-			address: input?.meta?.address || undefined,
-			addressData,
-			value,
-			allowDupplicates: input.allowDupplicates,
-			commentValue,
-			commentHint: input.commentHint ? input.commentHint : t("Please specify"),
-			rules: (input.rules || []).map((r) => {
-				if (r.message && r.message.indexOf("errors::") >= 0) {
-					r.message = t(r.message);
-				}
-				return r;
-			}),
-			template: input.template,
-		};
 
-		if (input.type === "switch" && input.autocomplete) {
-			Object.assign(config, { autocomplete: input.autocomplete });
-		}
+    const config = {
+      name,
+      input,
+      call: input?.meta?.call,
+      getFromLinking: input?.meta?.getFromLinking,
+      automaticallyLink: input.automaticallyLink,
+      props,
+      formsValue: values,
+      allFormsValue: allFormData,
+      onNewSetValue: input.onNewSetValue,
+      setValues,
+      onValuesChange,
+      changeLinking,
+      multiple: input?.meta?.multiple,
+      updateOptions: input.updateOptions || false,
+      options: input.options,
+      optionGroup: input.optionGroup,
+      optionsFilter: input?.meta?.optionsFilter,
+      filterCond: input?.meta?.filterCond,
+      disableOtherFields: input.disableOtherFields,
+      updateOtherFields: input.updateOtherFields,
+      repeatLabel: input.repeatLabel,
+      unique: checkDuplicates ? input.unique : undefined,
+      modalTitle: input.modalTitle,
+      buttonText: input.buttonText,
+      restricted: input.restricted || false,
+      totalMax: input.totalMax,
+      country: input.country || undefined,
+      address: input?.meta?.address || undefined,
+      addressData,
+      value,
+      allowDupplicates: input.allowDupplicates,
+      commentValue,
+      commentHint: input.commentHint ? input.commentHint : t('Please specify'),
+      rules: (input.rules || []).map(r => {
+        if (r.message && r.message.indexOf('errors::') >= 0) {
+          r.message = t(r.message);
+        }
+        return r;
+      }),
+      template: input.template,
+    };
 
-		if (input.type === "switch") {
-			if (input.replace) {
-				Object.assign(config, { replace: input.replace });
-			}
-			if (input.unique) {
-				Object.assign(config, { unique: input.unique });
-			}
-		}
+    if (input.type === 'switch' && input.autocomplete) {
+      Object.assign(config, { autocomplete: input.autocomplete });
+    }
 
-		if (input.type === "linkingModal") {
-			Object.assign(config, {
-				content: input.inputs,
-			});
-		}
+    if (input.type === 'switch') {
+      if (input.replace) {
+        Object.assign(config, { replace: input.replace });
+      }
+      if (input.unique) {
+        Object.assign(config, { unique: input.unique });
+      }
+    }
 
-		if (input.type === "group") {
-			Object.assign(config, {
-				groupInputs: Object.keys(input.groupInputs || {}).map((key) => {
-					const isRep = path.split(".")[0].match(/\[/);
-					const newPath =
-						path.split(".").length === 1
-							? key
-							: isRep && isRep.length
-							? path.split(".")[0] + `.${key}`
-							: path.split(".")[0] + `.${key}`;
-					const groupInp = input.groupInputs[key];
-					const inputData = getData(
-						groupInp.dataId || key,
-						input.groupInputs[key],
-						dot.pick(newPath, values),
-						null,
-						newPath,
-					);
-					return {
-						path: newPath,
-						type: input.groupInputs[key].type,
-						data: inputData,
-						input,
-						forms: {
-							form: MainForm,
-							allForms: plainForms,
-							values,
-							setFormValues: setValues,
-							setAddress,
-						},
-					};
-				}),
-			});
-		}
+    if (input.type === 'linkingModal') {
+      Object.assign(config, {
+        content: input.inputs
+      });
+    }
 
-		if (input.type === "groupInputs") {
-			Object.assign(config, {
-				groupInputs: Object.keys(input.inputs || {}).map((key) => {
-					const isRep = path.split(".")[0].match(/\[/);
-					const newPath =
-						path.split(".").length === 1
-							? key
-							: isRep && isRep.length
-							? path.split(".")[0] + `.${key}`
-							: path.split(".")[0] + `.${key}`;
-					const groupInp = input.inputs[key];
-					const inputData = getData(
-						groupInp.dataId || key,
-						input.inputs[key],
-						dot.pick(newPath, values),
-						null,
-						newPath,
-					);
-					return {
-						path: newPath,
-						type: input.inputs[key].type,
-						input,
-						data: inputData,
-						forms: {
-							form: MainForm,
-							allForms: plainForms,
-							values,
-							setFormValues: setValues,
-							setAddress,
-						},
-					};
-				}),
-			});
-		}
+    if (input.type === 'group') {
+      Object.assign(config, {
+        groupInputs: Object.keys(input.groupInputs || {}).map(key => {
+          const isRep = path.split('.')[0].match(/\[/);
+          const newPath = path.split('.').length === 1
+            ? key
+            : (isRep && isRep.length ? path.split('.')[0] + `.${key}` : path.split('.')[0] + `.${key}`);
+          const groupInp = input.groupInputs[key];
+          const inputData = getData(
+            groupInp.dataId || key,
+            input.groupInputs[key],
+            dot.pick(newPath, values),
+            null,
+            newPath
+          );
+          return {
+            path: newPath,
+            type: input.groupInputs[key].type,
+            data: inputData,
+            input,
+            forms: {
+              form: MainForm,
+              allForms: plainForms,
+              values,
+              setFormValues: setValues,
+              setAddress
+            },
+          }
+        }),
+      });
+    }
 
-		return config;
-	};
+    if (input.type === 'groupInputs') {
+      Object.assign(config, {
+        groupInputs: Object.keys(input.inputs || {}).map(key => {
+          const isRep = path.split('.')[0].match(/\[/);
+          const newPath = path.split('.').length === 1
+            ? key
+            : (isRep && isRep.length ? path.split('.')[0] + `.${key}` : path.split('.')[0] + `.${key}`);
+          const groupInp = input.inputs[key];
+          const inputData = getData(
+            groupInp.dataId || key,
+            input.inputs[key],
+            dot.pick(newPath, values),
+            null,
+            newPath
+          );
+          return {
+            path: newPath,
+            type: input.inputs[key].type,
+            input,
+            data: inputData,
+            forms: {
+              form: MainForm,
+              allForms: plainForms,
+              values,
+              setFormValues: setValues,
+              setAddress
+            },
+          }
+        }),
+      });
+    }
 
-	useEffect(() => {
-		setValues({
-			...values,
-			...formData,
-		});
+    return config;
+  }
 
-		setInitialValues((prev) => {
-			if (prev === undefined) {
-				return {
-					...values,
-					...formData,
-				};
-			}
-			return prev;
-		});
 
-		if (MainForm.setFieldsValue && isModal) {
-			// TODO: Need to check this one the error of date was here;
-			// MainForm.resetFields();
-			// MainForm.setFieldsValue({
-			//   ...values,
-			//   ...formData
-			// });
-		}
-	}, [data]);
+  useEffect(() => {
+    setValues({
+      ...values,
+      ...formData,
+    });
+  
+    setInitialValues((prev) => {
+      if(prev === undefined) {
+        return {
+          ...values,
+          ...formData,
+        }
+      }
+      return prev;
+    })
 
-	const renderForm = () => {
-		switch (template) {
-			default:
-				return (
-					<Form
-						form={MainForm}
-						autoComplete="new-password"
-						key={id}
-						name={id}
-						layout="vertical"
-						style={{ maxWidth: 700 }}
-						className={`main-form${formClass ? ` ${formClass}` : ""}`}
-						onValuesChange={(_changedValue, _allValues) => {
-							const changedValue = { ..._changedValue };
-							const allValues = { ..._allValues };
+    if (MainForm.setFieldsValue && isModal) {
+      // TODO: Need to check this one the error of date was here;
+      // MainForm.resetFields();
+      // MainForm.setFieldsValue({
+      //   ...values,
+      //   ...formData
+      // });
+    }
+  }, [data]);
+  
 
-							// AjaxSubGroup fix, so meta dont get lost
-							Object.keys(_allValues || {}).forEach((key) => {
-								if (
-									key &&
-									values[key] &&
-									values[key].meta &&
-									typeof values[key] === "object"
-								) {
-									changedValue[key] = {
-										...values[key],
-										..._changedValue[key],
-									};
-									allValues[key] = {
-										...values[key],
-										..._allValues[key],
-									};
-								}
-							});
+  const renderForm = () => {
+    switch (template) {
+      default:
+        return (
+          <Form
+            form={MainForm}
+            autoComplete="new-password"
+            key={id}
+            name={id}
+            layout="vertical"
+            style={{ maxWidth: 700 }}
+            className={`main-form${formClass ? ` ${formClass}` : ''}`}
+            onValuesChange={(_changedValue, _allValues) => {
+              const changedValue = { ..._changedValue };
+              const allValues = { ..._allValues };
+              
+              // AjaxSubGroup fix, so meta dont get lost
+              Object.keys(_allValues || {}).forEach(key => {
+                if (key && values[key] && values[key].meta && typeof values[key] === 'object') {
+                  changedValue[key] = {
+                    ...values[key],
+                    ..._changedValue[key],
+                  };
+                  allValues[key] = {
+                    ...values[key],
+                    ..._allValues[key],
+                  };
+                }
+              }) 
 
-							const cleanedChangeValue = convertUndefinedToNull(changedValue);
-							const cleanedAllValues = convertUndefinedToNull({
-								...values,
-								...allValues,
-							});
+              const cleanedChangeValue = convertUndefinedToNull(changedValue);
+              const cleanedAllValues = convertUndefinedToNull({
+                ...values,
+                ...allValues
+              });
 
-							if (
-								"associatedMine" in cleanedChangeValue &&
-								cleanedChangeValue.associatedMine === null &&
-								values.associatedMine != null
-							) {
-								cleanedChangeValue.associatedMine = values.associatedMine;
-								cleanedAllValues.associatedMine = values.associatedMine;
-							}
+              if (
+                'associatedMine' in cleanedChangeValue &&
+                cleanedChangeValue.associatedMine === null &&
+                values.associatedMine != null
+              ) {
+                cleanedChangeValue.associatedMine = values.associatedMine;
+                cleanedAllValues.associatedMine = values.associatedMine;
+              }
+              
 
-							// onValuesChange(changedValue, {
-							//   ...values,
-							//   ...allValues
-							// });
-							onValuesChange(cleanedChangeValue, cleanedAllValues);
+              // onValuesChange(changedValue, {
+              //   ...values,
+              //   ...allValues
+              // });
+              onValuesChange(cleanedChangeValue, cleanedAllValues);
 
-							setValues(cleanedAllValues);
-							// setValues({
-							//   ...values,
-							//   ...allValues
-							// });
-						}}
-					>
-						{definition}
-						{introText && introText !== "" ? (
-							<p className="repeatable">{introText}</p>
-						) : null}
-						{options.alertConf && typeof options.alertConf === "object" ? (
-							<Alert
-								message={options.alertConf.text}
-								type={options.alertConf.type}
-								closable={options.alertConf.closable}
-							/>
-						) : null}
-						{Object.keys(options || {})
-							.filter(
-								(k) =>
-									!excludedKeys.includes(k) &&
-									showHideInput(
-										options[k],
-										values,
-										undefined,
-										undefined,
-										setValues,
-										k,
-									),
-							)
-							.sort((a, b) => (options[a].position || 0) - (options[b].position || 0))
-							.map((k, i) => {
-								const input = options[k];
+              setValues(cleanedAllValues);
+              // setValues({
+              //   ...values,
+              //   ...allValues
+              // });
+            }}
+          >
+            {definition}
+            {introText && introText !== '' ? <p className="repeatable">{introText}</p> : null}
+            {options.alertConf && typeof options.alertConf === "object" ? (
+              <Alert
+                message={options.alertConf.text}
+                type={options.alertConf.type}
+                closable={options.alertConf.closable} />
+            ) : null}
+            {Object.keys(options || {})
+              .filter(k => !excludedKeys.includes(k) &&
+                showHideInput(options[k], values, undefined, undefined, setValues, k)
+              )
+              .sort((a, b) => (options[a].position || 0) - (options[b].position || 0))
+              .map((k, i) => {
+                const input = options[k];
+              
+                // Apply styling based on individual input type
+                const inputStyles = input.type === 'groupInputs' || input.type === 'phoneNumber' ? {} : { '--static-width': (input.type === 'group' && data[k]?.noPlanningRequired) ? '586px' :staticWidth };
+                
+                if (input.type === 'ajaxSubGroup') {
+                  return (
+                    <div key={i} style={inputStyles}>
+                      <AjaxSubGroup
+                        highlightMandatory={highlightMandatory}
+                        form={input}
+                        options={options}
+                        k={k}
+                        setValues={setValues}
+                        values={values}
+                        excludedKeys={excludedKeys}
+                        i={i}
+                        formTitles={formTitles}
+                        getData={getData}
+                        MainForm={MainForm}
+                        plainForms={plainForms}
+                        setAddress={setAddress}
+                        onValuesChange={onValuesChange}
+                        data={data}
+                        allData={{ ...allData, subGroupTitle }}
+                        changeLinking={changeLinking}
+                        changeInputMeta={changeInputMeta}
+                        user={user}
+                      />
+                    </div>
+                  );
+                } else if (input.inputs && input.type !== 'groupInputs' && input.type !== 'groupCheckbox' && input.type !== 'dataLinkGroup') {
+                  return (
+                    <div 
+                      className={formatClassname(['group', !input.repeatable && 'sub-group'])} 
+                      key={i}
+                      style={inputStyles}
+                    >
+                      {renderNestedInputs(
+                        options,
+                        k,
+                        setValues,
+                        values,
+                        excludedKeys,
+                        i,
+                        formTitles,
+                        getData,
+                        MainForm,
+                        plainForms,
+                        setAddress,
+                        onValuesChange,
+                        data,
+                        { ...allData, subGroupTitle },
+                        changeLinking,
+                        changeInputMeta,
+                        t,
+                        highlightMandatory,
+                      )}
+                    </div>
+                  );
+                } else {
+                  const inputId = input.dataId || k;
+                  const value = values[inputId];
+                  const commentValue = (inputsMeta[k] || {}).comment;
+                  const inputData = getData(inputId, input, value, commentValue, inputId, inputId);
 
-								// Apply styling based on individual input type
-								const inputStyles =
-									input.type === "groupInputs" || input.type === "phoneNumber"
-										? {}
-										: {
-												"--static-width":
-													input.type === "group" &&
-													data[k]?.noPlanningRequired
-														? "586px"
-														: staticWidth,
-										  };
+                  if (!input.type) {
+                    return null;
+                  }
 
-								if (input.type === "ajaxSubGroup") {
-									return (
-										<div key={i} style={inputStyles}>
-											<AjaxSubGroup
-												highlightMandatory={highlightMandatory}
-												form={input}
-												options={options}
-												k={k}
-												setValues={setValues}
-												values={values}
-												excludedKeys={excludedKeys}
-												i={i}
-												formTitles={formTitles}
-												getData={getData}
-												MainForm={MainForm}
-												plainForms={plainForms}
-												setAddress={setAddress}
-												onValuesChange={onValuesChange}
-												data={data}
-												allData={{ ...allData, subGroupTitle }}
-												changeLinking={changeLinking}
-												changeInputMeta={changeInputMeta}
-												user={user}
-											/>
-										</div>
-									);
-								} else if (
-									input.inputs &&
-									input.type !== "groupInputs" &&
-									input.type !== "groupCheckbox" &&
-									input.type !== "dataLinkGroup"
-								) {
-									return (
-										<div
-											className={formatClassname([
-												"group",
-												!input.repeatable && "sub-group",
-											])}
-											key={i}
-											style={inputStyles}
-										>
-											{renderNestedInputs(
-												options,
-												k,
-												setValues,
-												values,
-												excludedKeys,
-												i,
-												formTitles,
-												getData,
-												MainForm,
-												plainForms,
-												setAddress,
-												onValuesChange,
-												data,
-												{ ...allData, subGroupTitle },
-												changeLinking,
-												changeInputMeta,
-												t,
-												highlightMandatory,
-											)}
-										</div>
-									);
-								} else {
-									const inputId = input.dataId || k;
-									const value = values[inputId];
-									const commentValue = (inputsMeta[k] || {}).comment;
-									const inputData = getData(
-										inputId,
-										input,
-										value,
-										commentValue,
-										inputId,
-										inputId,
-									);
+                  return showHideInput(input, values, undefined, undefined, setValues, inputId) ? 
+                    <div className="group" key={i} style={inputStyles}>
+                      {getFormTitles(formTitles, inputData.name, i)}
+                      <GetFormItem
+                        inputKey={k}
+                        inputData={inputData}
+                        inputId={inputId}
+                        input={input}
+                        highlightMandatory={highlightMandatory}
+                        changeInputMeta={changeInputMeta}
+                        changeLinking={changeLinking}
+                        inputMeta={inputsMeta[k]}
+                        values={values}
+                        MainForm={MainForm}
+                        options={options}
+                        plainForms={plainForms}
+                        setValues={setValues}
+                        setAddress={setAddress}
+                        onValuesChange={onValuesChange}
+                        i={i}
+                        setLoading={setLoading}
+                      />
+                    </div> : null
+                }
+              })}
+            <Space size="large" className="w-100 mb-3">&nbsp;</Space>
+          </Form>
+        )
+    }
+  };
 
-									if (!input.type) {
-										return null;
-									}
-
-									return showHideInput(
-										input,
-										values,
-										undefined,
-										undefined,
-										setValues,
-										inputId,
-									) ? (
-										<div className="group" key={i} style={inputStyles}>
-											{getFormTitles(formTitles, inputData.name, i)}
-											<GetFormItem
-												inputKey={k}
-												inputData={inputData}
-												inputId={inputId}
-												input={input}
-												highlightMandatory={highlightMandatory}
-												changeInputMeta={changeInputMeta}
-												changeLinking={changeLinking}
-												inputMeta={inputsMeta[k] || {}}
-												values={values}
-												MainForm={MainForm}
-												options={options}
-												plainForms={plainForms}
-												setValues={setValues}
-												setAddress={setAddress}
-												onValuesChange={onValuesChange}
-												i={i}
-												setLoading={setLoading}
-											/>
-										</div>
-									) : null;
-								}
-							})}
-						<Space size="large" className="w-100 mb-3">
-							&nbsp;
-						</Space>
-					</Form>
-				);
-		}
-	};
-
-	return (
-		<EditProvider
-			t={t}
-			isReview={isReview}
-			user={user}
-			getMainApiUrl={getMainApiUrl}
-			getAppHeader={getAppHeader}
-			highlightMandatory={highlightMandatory}
-			errors={errors}
-			changeErrors={changeErrors}
-			getApiBaseUrl={getApiBaseUrl}
-			ajaxForms={ajaxForms}
-			ajaxOptions={ajaxOptions}
-			changeAjaxOptions={changeAjaxOptions}
-			app={app}
-			query={query}
-			goTo={goTo}
-			changeAjaxForms={changeAjaxForms}
-			evaluationConfig={evaluationConfig}
-		>
-			{breadcrumb}
-			{renderForm()}
-			{isModal && (
-				<div className="form-botom text-center">
-					<Button
-						type="primary"
-						className="mr-2"
-						loading={isSubmitting || loading}
-						disabled={isSubmitting || loading}
-						onClick={async (ev) => {
-							if (!loading) {
-								ev.stopPropagation();
-								MainForm.validateFields()
-									.then(() => {
-										const formV = MainForm.getFieldsValue();
-										onSubmit({
-											...values,
-											...formV,
-										});
-									})
-									.catch((e) => {
-										console.log(e);
-									});
-							}
-						}}
-					>
-						{t("Save")}
-					</Button>
-					<Button
-						loading={isSubmitting}
-						disabled={isSubmitting}
-						onClick={() => onCancel()}
-					>
-						{t("Cancel")}
-					</Button>
-				</div>
-			)}
-		</EditProvider>
-	);
-};
+  return (
+    <EditProvider
+      t={t}
+      isReview={isReview}
+      user={user}
+      getMainApiUrl={getMainApiUrl}
+      getAppHeader={getAppHeader}
+      highlightMandatory={highlightMandatory}
+      errors={errors}
+      changeErrors={changeErrors}
+      getApiBaseUrl={getApiBaseUrl}
+      ajaxForms={ajaxForms}
+      ajaxOptions={ajaxOptions}
+      changeAjaxOptions={changeAjaxOptions}
+      app={app}
+      query={query}
+      goTo={goTo}
+      changeAjaxForms={changeAjaxForms}
+      evaluationConfig={evaluationConfig}
+    >
+      {breadcrumb}
+      {renderForm()}
+      {isModal && (
+        <div className="form-botom text-center">
+          <Button
+            type="primary"
+            className="mr-2"
+            loading={(isSubmitting || loading)}
+            disabled={(isSubmitting || loading)}
+            onClick={async (ev) => {
+              if (!loading) {
+                ev.stopPropagation();
+                MainForm.validateFields().then(() => {
+                  const formV = MainForm.getFieldsValue();
+                  onSubmit({
+                    ...values,
+                    ...formV
+                  });
+                }).catch(e => {
+                  console.log(e);
+                });
+              }
+            }}>
+            {t('Save')}
+          </Button>
+          <Button
+            loading={isSubmitting}
+            disabled={isSubmitting}
+            onClick={() => onCancel()}>
+            {t('Cancel')}
+          </Button>
+        </div>
+      )}
+    </EditProvider>
+  );
+}
 
 EditForm.propTypes = {
-	highlightMandatory: PropTypes.any,
-	onValuesChange: PropTypes.func,
-	form: PropTypes.object,
-	data: PropTypes.object,
-	allData: PropTypes.object,
-	excludedKeys: PropTypes.any,
-	disabledInputs: PropTypes.any,
-	checkDuplicates: PropTypes.any,
-	plainForms: PropTypes.any,
-	linkingForms: PropTypes.any,
-	onSubmit: PropTypes.func,
-	onCancel: PropTypes.func,
-	isModal: PropTypes.any,
-	breadcrumb: PropTypes.any,
-	definition: PropTypes.any,
-	subGroupTitle: PropTypes.any,
-	MainForm: PropTypes.any,
-	template: PropTypes.any,
-	loading: PropTypes.any,
-	setLoading: PropTypes.func,
-	inputsMeta: PropTypes.any,
-	changeInputMeta: PropTypes.func,
-	changeLinking: PropTypes.func,
-	t: PropTypes.any,
-	user: PropTypes.any,
-	ajaxForms: PropTypes.any,
-	ajaxOptions: PropTypes.any,
-	getMainApiUrl: PropTypes.any,
-	getAppHeader: PropTypes.any,
-	getApiBaseUrl: PropTypes.any,
-	changeAjaxOptions: PropTypes.any,
-	app: PropTypes.any,
-	query: PropTypes.any,
-	goTo: PropTypes.any,
-	changeAjaxForms: PropTypes.any,
-	errors: PropTypes.any,
-	changeErrors: PropTypes.func,
-	staticWidth: PropTypes.string,
-};
+  highlightMandatory: PropTypes.any,
+  onValuesChange: PropTypes.func,
+  form: PropTypes.object,
+  data: PropTypes.object,
+  allData: PropTypes.object,
+  excludedKeys: PropTypes.any,
+  disabledInputs: PropTypes.any,
+  checkDuplicates: PropTypes.any,
+  plainForms: PropTypes.any,
+  linkingForms: PropTypes.any,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  isModal: PropTypes.any,
+  breadcrumb: PropTypes.any,
+  definition: PropTypes.any,
+  subGroupTitle: PropTypes.any,
+  MainForm: PropTypes.any,
+  template: PropTypes.any,
+  loading: PropTypes.any,
+  setLoading: PropTypes.func,
+  inputsMeta: PropTypes.any,
+  changeInputMeta: PropTypes.func,
+  changeLinking: PropTypes.func,
+  t: PropTypes.any,
+  user: PropTypes.any,
+  ajaxForms: PropTypes.any,
+  ajaxOptions: PropTypes.any,
+  getMainApiUrl: PropTypes.any,
+  getAppHeader: PropTypes.any,
+  getApiBaseUrl: PropTypes.any,
+  changeAjaxOptions: PropTypes.any,
+  app: PropTypes.any,
+  query: PropTypes.any,
+  goTo: PropTypes.any,
+  changeAjaxForms: PropTypes.any,
+  errors: PropTypes.any,
+  changeErrors: PropTypes.func,
+  staticWidth: PropTypes.string,
+}