@asaleh37/ui-base 25.12.122 → 25.12.171

package/src/components/templates/DataEntryTemplates/TemplateDataForm/TemplateForm.tsx

@@ -1,427 +1,427 @@
-import { Box } from "@mui/system";
-import React, { useEffect, useState } from "react";
-import * as z from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useParams } from "react-router-dom";
-import { Button, Grid2, Icon, IconButton, Tooltip } from "@mui/material";
-import { toast } from "react-toastify";
-import FormElementGroup from "./FormElementGroup";
-import FormElementField from "./FormElementField";
-import FormAction from "./FormAction";
-import { constructValidationSchema, getAllFields } from "../DataEntryUtil";
-import {
-  FormElementProps,
-  RecordAction,
-  TemplateFormProps,
-} from "../DataEntryTypes";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useTranslation } from "react-i18next";
-import { useWindow } from "../../../../hooks";
-import AttachmentPanel from "../../attachment/AttachmentPanel";
-import WorkflowDocumentPanel from "../../workflow/WorkflowDocumentPanel";
-
-const TemplateForm: React.FC<TemplateFormProps> = (
-  props: TemplateFormProps
-) => {
-  const { Window: AttachmentWindow, setWindowState: setAttachmentWindowState } =
-    useWindow({
-      windowTitle: "Attachments",
-      windowIcon: "paperclip",
-      width: "fit-content",
-      height: "fit-content",
-      minHeight: 500,
-      minWidth: 400,
-    });
-
-  const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
-    useState<boolean>(true);
-  const { t } = useTranslation();
-  const fields = getAllFields(props.elements);
-
-  const [disabledFields, setDisabledFields] = useState<string[]>([]);
-  const [hiddenFields, setHiddenFields] = useState<string[]>([]);
-  const initialValues: any = {};
-  for (const element of props.elements) {
-    if (
-      element?.type === "field" &&
-      element?.mode === "props" &&
-      element?.props?.defaultValue
-    ) {
-      initialValues[element.props.fieldName] = element.props.defaultValue;
-    }
-  }
-
-  let formSchema = null;
-  if (props?.validationSchema) {
-    formSchema = props.validationSchema;
-  } else {
-    formSchema = z.object(constructValidationSchema(fields));
-  }
-  type FormData = z.infer<typeof formSchema>;
-  const formManager = useForm<FormData>({
-    resolver: zodResolver(formSchema),
-    defaultValues: initialValues,
-  });
-  const formValues = formManager.watch();
-  const pathParameters = useParams();
-  const formRouteRecordIdParamName: any = props?.formRouteRecordIdParamName;
-
-  const loadRecord = async () => {
-    let idToLoad = null;
-    if (props?.recordIdToEdit) {
-      idToLoad = props.recordIdToEdit;
-    } else if (
-      formRouteRecordIdParamName &&
-      pathParameters[formRouteRecordIdParamName]
-    ) {
-      idToLoad = pathParameters[formRouteRecordIdParamName];
-    }
-    if (idToLoad) {
-      const retrievedRecord: any = await props.apiActions.loadRecordById(
-        idToLoad
-      );
-      if (retrievedRecord) {
-        formManager.reset({ ...retrievedRecord });
-        for (const field of fields) {
-          if (
-            field?.fieldType === "combobox" &&
-            retrievedRecord[field.fieldName]
-          ) {
-            if (
-              field?.comboboxValueDataType &&
-              field?.comboboxValueDataType === "string"
-            ) {
-              formManager.setValue(
-                field.fieldName,
-                retrievedRecord[field.fieldName] + ""
-              );
-            } else {
-              formManager.setValue(
-                field.fieldName,
-                retrievedRecord[field.fieldName]
-              );
-            }
-          }
-        }
-        if (props?.formValuesChangeCallBk) {
-          props?.formValuesChangeCallBk(formValues, formActions, formManager);
-        }
-      }
-    } else {
-      formManager.reset({});
-      props.formValuesChangeCallBk(formValues, formActions, formManager);
-    }
-  };
-
-  const saveRecord = async (record: any) => {
-    if (props?.preSaveValidation && !props.preSaveValidation(record)) {
-      return;
-    }
-    if (record) {
-      const savedRecord: any = await props.apiActions.saveRecord(record);
-      if (savedRecord) {
-        formManager.reset({ ...savedRecord });
-        if (props?.formSavedSuccessfullyCallBk) {
-          props.formSavedSuccessfullyCallBk(savedRecord);
-        }
-        if (props?.formCloseCallBk) {
-          props.formCloseCallBk();
-        }
-      }
-    }
-  };
-
-  const { Window: WorkflowWindow, setWindowState: setWorkflowWindowState } =
-    useWindow({
-      windowTitle: "Approvals",
-      windowIcon: "stamp",
-      height: "fit-content",
-      minHeight: 500,
-      width: "fit-content",
-      // width: 1100,
-      onCloseCallBack: async () => {
-        await loadRecord();
-      },
-    });
-
-  const formActions = {
-    setFieldValue: (fieldName: string, fieldValue: any) => {
-      formManager.setValue(fieldName, fieldValue);
-    },
-    hideField: (fieldName: string) => {
-      setHiddenFields((oldValues) => {
-        const newValues = [...oldValues, fieldName];
-        return newValues;
-      });
-    },
-    showField: (fieldName: string) => {
-      setHiddenFields((oldValues) => {
-        const newValues = oldValues.filter((x) => x !== fieldName);
-        return newValues;
-      });
-    },
-    disableField: (fieldName: string) => {
-      setDisabledFields((oldValues) => {
-        const newValues = [...oldValues, fieldName];
-        return newValues;
-      });
-    },
-    enableField: (fieldName: string) => {
-      setDisabledFields((oldValues) => {
-        const newValues = oldValues.filter((x) => x !== fieldName);
-        return newValues;
-      });
-    },
-  };
-
-  useEffect(() => {
-    const initiallyHiddenFields = [];
-    const initiallyDisabledFields = [];
-    for (const field of fields) {
-      if (field?.hidden) {
-        initiallyHiddenFields.push(field.fieldName);
-      }
-      if (field?.disabled) {
-        initiallyDisabledFields.push(field.fieldName);
-      }
-    }
-    setHiddenFields(initiallyHiddenFields);
-    setDisabledFields(initiallyDisabledFields);
-  }, [props.elements]);
-  useEffect(() => {
-    loadRecord();
-  }, [props?.recordIdToEdit]);
-
-  useEffect(() => {
-    if (props?.attachment && props?.attachment?.enableAttachFn) {
-      setAttachmentPanelEnabledForRecord(
-        props.attachment.enableAttachFn(formValues)
-      );
-    } else {
-      setAttachmentPanelEnabledForRecord(true);
-    }
-  }, [formValues]);
-  return (
-    <>
-      {props?.attachment ? (
-        <AttachmentWindow>
-          <AttachmentPanel
-            attachmentCode={props.attachment.attachmentCode}
-            refKey={formValues[props?.keyColumnName || "id"]}
-            enableAttachment={attachmentPanelEnabledForRecord}
-          />
-        </AttachmentWindow>
-      ) : (
-        <></>
-      )}
-      {props?.workFlowDocumentCode ? (
-        <WorkflowWindow>
-          <WorkflowDocumentPanel
-            workFlowDocumentCode={props.workFlowDocumentCode}
-            refDocumentId={formValues[props?.keyColumnName || "id"]}
-            postActionCallBk={() => {
-              setWorkflowWindowState(false);
-              loadRecord();
-            }}
-            cancelActionCallBk={() => {
-              setWorkflowWindowState(false);
-              loadRecord();
-            }}
-          />
-        </WorkflowWindow>
-      ) : (
-        <></>
-      )}
-
-      <Box
-        sx={{
-          display: "flex",
-          flex: 1,
-          width: "100%",
-          height: "fit-content",
-          flexDirection: "column",
-          alignItems: "center",
-          overflow: "auto",
-        }}
-      >
-        <Grid2 sx={{ width: "100%" }} container>
-          {props.elements.map((formElement: FormElementProps, index) => {
-            if (formElement.type === "group") {
-              return (
-                <FormElementGroup
-                  key={index}
-                  {...formElement.props}
-                  formManager={formManager}
-                  formValues={formValues}
-                  formActions={formActions}
-                  hiddenFields={hiddenFields}
-                  disabledFields={disabledFields}
-                  formValuesChangeCallBk={props.formValuesChangeCallBk}
-                />
-              );
-            } else if (
-              formElement.type === "field" &&
-              formElement.mode === "props"
-            ) {
-              return (
-                <FormElementField
-                  key={index}
-                  fieldInfo={formElement.props}
-                  formManager={formManager}
-                  formValues={formValues}
-                  formActions={formActions}
-                  hiddenFields={hiddenFields}
-                  disabledFields={disabledFields}
-                  formValuesChangeCallBk={props.formValuesChangeCallBk}
-                />
-              );
-            } else if (
-              formElement.type === "field" &&
-              formElement.mode === "node"
-            ) {
-              return (
-                <Grid2
-                  key={index}
-                  size={
-                    formElement?.props?.formProps?.fieldSize || {
-                      lg: 3,
-                      md: 6,
-                      xs: 12,
-                    }
-                  }
-                  sx={{ padding: 1, width: "100%" }}
-                >
-                  <formElement.node
-                    formManager={formManager}
-                    formValues={formValues}
-                  />
-                </Grid2>
-              );
-            }
-          })}
-        </Grid2>
-      </Box>
-
-      <Box
-        sx={{
-          display: "flex",
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "flex-start",
-        }}
-      >
-        {formValues[props?.keyColumnName || "id"] ? (
-          props?.attachment ? (
-            <Tooltip title="Attachments">
-              <IconButton
-                onClick={() => {
-                  setAttachmentWindowState(true);
-                }}
-              >
-                <FontAwesomeIcon icon="paperclip" />
-              </IconButton>
-            </Tooltip>
-          ) : null
-        ) : null}
-        {formValues[props?.keyColumnName || "id"] ? (
-          props?.workFlowDocumentCode ? (
-            <Tooltip title="Approvals">
-              <IconButton
-                onClick={() => {
-                  setWorkflowWindowState(true);
-                }}
-              >
-                <FontAwesomeIcon icon="stamp" />
-              </IconButton>
-            </Tooltip>
-          ) : null
-        ) : null}
-        {props?.actions ? (
-          props.actions.map((action: RecordAction) => {
-            if (action?.isIdRequired === false) {
-              return <FormAction {...action} record={formValues} />;
-            } else if (formValues[props?.keyColumnName || "id"]) {
-              if (action?.formActionProps?.enabled === true) {
-                return <FormAction {...action} record={formValues} />;
-              } else {
-                return <></>;
-              }
-            }
-          })
-        ) : (
-          <></>
-        )}
-        <div style={{ flex: 1 }}></div>
-        {props?.saveButtonSpecs?.hidden ? (
-          <></>
-        ) : (
-          <Button
-            variant={
-              props?.saveButtonSpecs?.actionButtonVariant
-                ? props.saveButtonSpecs.actionButtonVariant
-                : "contained"
-            }
-            sx={{ m: 1 }}
-            startIcon={
-              props?.saveButtonSpecs?.icon ? (
-                <FontAwesomeIcon icon={props.saveButtonSpecs.icon} />
-              ) : null
-            }
-            color={
-              props?.saveButtonSpecs?.actionButtonColor
-                ? props.saveButtonSpecs.actionButtonColor
-                : "primary"
-            }
-            onClick={formManager.handleSubmit(
-              (values) => {
-                saveRecord(values);
-              },
-              (errors) => {
-                toast.error(
-                  "Form Data is not valid, make sure you have all field with valid data"
-                );
-                console.log("form validation error", errors);
-              }
-            )}
-          >
-            {t(props?.saveButtonSpecs?.label || "SAVE_BTN_LABEL")}
-          </Button>
-        )}
-
-        {props?.cancelButtonSpecs?.hidden ? (
-          <></>
-        ) : (
-          <Button
-            variant={
-              props?.cancelButtonSpecs?.actionButtonVariant
-                ? props.cancelButtonSpecs.actionButtonVariant
-                : "contained"
-            }
-            startIcon={
-              props?.cancelButtonSpecs?.icon ? (
-                <FontAwesomeIcon icon={props.cancelButtonSpecs.icon} />
-              ) : null
-            }
-            color={
-              props?.cancelButtonSpecs?.actionButtonColor
-                ? props.cancelButtonSpecs.actionButtonColor
-                : "error"
-            }
-            sx={{ m: 1 }}
-            onClick={() => {
-              if (props?.formCloseCallBk) {
-                props.formCloseCallBk();
-              }
-              formManager.reset(initialValues);
-            }}
-          >
-            {t(props?.cancelButtonSpecs?.label || "CANCEL_BTN_LABEL")}
-          </Button>
-        )}
-      </Box>
-    </>
-  );
-};
-
-export default TemplateForm;
+import { Box } from "@mui/system";
+import React, { useEffect, useState } from "react";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useParams } from "react-router-dom";
+import { Button, Grid2, Icon, IconButton, Tooltip } from "@mui/material";
+import { toast } from "react-toastify";
+import FormElementGroup from "./FormElementGroup";
+import FormElementField from "./FormElementField";
+import FormAction from "./FormAction";
+import { constructValidationSchema, getAllFields } from "../DataEntryUtil";
+import {
+  FormElementProps,
+  RecordAction,
+  TemplateFormProps,
+} from "../DataEntryTypes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useTranslation } from "react-i18next";
+import { useWindow } from "../../../../hooks";
+import AttachmentPanel from "../../attachment/AttachmentPanel";
+import WorkflowDocumentPanel from "../../workflow/WorkflowDocumentPanel";
+
+const TemplateForm: React.FC<TemplateFormProps> = (
+  props: TemplateFormProps
+) => {
+  const { Window: AttachmentWindow, setWindowState: setAttachmentWindowState } =
+    useWindow({
+      windowTitle: "Attachments",
+      windowIcon: "paperclip",
+      width: "fit-content",
+      height: "fit-content",
+      minHeight: 500,
+      minWidth: 400,
+    });
+
+  const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
+    useState<boolean>(true);
+  const { t } = useTranslation();
+  const fields = getAllFields(props.elements);
+
+  const [disabledFields, setDisabledFields] = useState<string[]>([]);
+  const [hiddenFields, setHiddenFields] = useState<string[]>([]);
+  const initialValues: any = {};
+  for (const element of props.elements) {
+    if (
+      element?.type === "field" &&
+      element?.mode === "props" &&
+      element?.props?.defaultValue
+    ) {
+      initialValues[element.props.fieldName] = element.props.defaultValue;
+    }
+  }
+
+  let formSchema = null;
+  if (props?.validationSchema) {
+    formSchema = props.validationSchema;
+  } else {
+    formSchema = z.object(constructValidationSchema(fields));
+  }
+  type FormData = z.infer<typeof formSchema>;
+  const formManager = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: initialValues,
+  });
+  const formValues = formManager.watch();
+  const pathParameters = useParams();
+  const formRouteRecordIdParamName: any = props?.formRouteRecordIdParamName;
+
+  const loadRecord = async () => {
+    let idToLoad = null;
+    if (props?.recordIdToEdit) {
+      idToLoad = props.recordIdToEdit;
+    } else if (
+      formRouteRecordIdParamName &&
+      pathParameters[formRouteRecordIdParamName]
+    ) {
+      idToLoad = pathParameters[formRouteRecordIdParamName];
+    }
+    if (idToLoad) {
+      const retrievedRecord: any = await props.apiActions.loadRecordById(
+        idToLoad
+      );
+      if (retrievedRecord) {
+        formManager.reset({ ...retrievedRecord });
+        for (const field of fields) {
+          if (
+            field?.fieldType === "combobox" &&
+            retrievedRecord[field.fieldName]
+          ) {
+            if (
+              field?.comboboxValueDataType &&
+              field?.comboboxValueDataType === "string"
+            ) {
+              formManager.setValue(
+                field.fieldName,
+                retrievedRecord[field.fieldName] + ""
+              );
+            } else {
+              formManager.setValue(
+                field.fieldName,
+                retrievedRecord[field.fieldName]
+              );
+            }
+          }
+        }
+        if (props?.formValuesChangeCallBk) {
+          props?.formValuesChangeCallBk(formValues, formActions, formManager);
+        }
+      }
+    } else {
+      formManager.reset({});
+      props.formValuesChangeCallBk(formValues, formActions, formManager);
+    }
+  };
+
+  const saveRecord = async (record: any) => {
+    if (props?.preSaveValidation && !props.preSaveValidation(record)) {
+      return;
+    }
+    if (record) {
+      const savedRecord: any = await props.apiActions.saveRecord(record);
+      if (savedRecord) {
+        formManager.reset({ ...savedRecord });
+        if (props?.formSavedSuccessfullyCallBk) {
+          props.formSavedSuccessfullyCallBk(savedRecord);
+        }
+        if (props?.formCloseCallBk) {
+          props.formCloseCallBk();
+        }
+      }
+    }
+  };
+
+  const { Window: WorkflowWindow, setWindowState: setWorkflowWindowState } =
+    useWindow({
+      windowTitle: "Approvals",
+      windowIcon: "stamp",
+      height: "fit-content",
+      minHeight: 500,
+      width: "fit-content",
+      // width: 1100,
+      onCloseCallBack: async () => {
+        await loadRecord();
+      },
+    });
+
+  const formActions = {
+    setFieldValue: (fieldName: string, fieldValue: any) => {
+      formManager.setValue(fieldName, fieldValue);
+    },
+    hideField: (fieldName: string) => {
+      setHiddenFields((oldValues) => {
+        const newValues = [...oldValues, fieldName];
+        return newValues;
+      });
+    },
+    showField: (fieldName: string) => {
+      setHiddenFields((oldValues) => {
+        const newValues = oldValues.filter((x) => x !== fieldName);
+        return newValues;
+      });
+    },
+    disableField: (fieldName: string) => {
+      setDisabledFields((oldValues) => {
+        const newValues = [...oldValues, fieldName];
+        return newValues;
+      });
+    },
+    enableField: (fieldName: string) => {
+      setDisabledFields((oldValues) => {
+        const newValues = oldValues.filter((x) => x !== fieldName);
+        return newValues;
+      });
+    },
+  };
+
+  useEffect(() => {
+    const initiallyHiddenFields = [];
+    const initiallyDisabledFields = [];
+    for (const field of fields) {
+      if (field?.hidden) {
+        initiallyHiddenFields.push(field.fieldName);
+      }
+      if (field?.disabled) {
+        initiallyDisabledFields.push(field.fieldName);
+      }
+    }
+    setHiddenFields(initiallyHiddenFields);
+    setDisabledFields(initiallyDisabledFields);
+  }, [props.elements]);
+  useEffect(() => {
+    loadRecord();
+  }, [props?.recordIdToEdit]);
+
+  useEffect(() => {
+    if (props?.attachment && props?.attachment?.enableAttachFn) {
+      setAttachmentPanelEnabledForRecord(
+        props.attachment.enableAttachFn(formValues)
+      );
+    } else {
+      setAttachmentPanelEnabledForRecord(true);
+    }
+  }, [formValues]);
+  return (
+    <>
+      {props?.attachment ? (
+        <AttachmentWindow>
+          <AttachmentPanel
+            attachmentCode={props.attachment.attachmentCode}
+            refKey={formValues[props?.keyColumnName || "id"]}
+            enableAttachment={attachmentPanelEnabledForRecord}
+          />
+        </AttachmentWindow>
+      ) : (
+        <></>
+      )}
+      {props?.workFlowDocumentCode ? (
+        <WorkflowWindow>
+          <WorkflowDocumentPanel
+            workFlowDocumentCode={props.workFlowDocumentCode}
+            refDocumentId={formValues[props?.keyColumnName || "id"]}
+            postActionCallBk={() => {
+              setWorkflowWindowState(false);
+              loadRecord();
+            }}
+            cancelActionCallBk={() => {
+              setWorkflowWindowState(false);
+              loadRecord();
+            }}
+          />
+        </WorkflowWindow>
+      ) : (
+        <></>
+      )}
+
+      <Box
+        sx={{
+          display: "flex",
+          flex: 1,
+          width: "100%",
+          height: "fit-content",
+          flexDirection: "column",
+          alignItems: "center",
+          overflow: "auto",
+        }}
+      >
+        <Grid2 sx={{ width: "100%" }} container>
+          {props.elements.map((formElement: FormElementProps, index) => {
+            if (formElement.type === "group") {
+              return (
+                <FormElementGroup
+                  key={index}
+                  {...formElement.props}
+                  formManager={formManager}
+                  formValues={formValues}
+                  formActions={formActions}
+                  hiddenFields={hiddenFields}
+                  disabledFields={disabledFields}
+                  formValuesChangeCallBk={props.formValuesChangeCallBk}
+                />
+              );
+            } else if (
+              formElement.type === "field" &&
+              formElement.mode === "props"
+            ) {
+              return (
+                <FormElementField
+                  key={index}
+                  fieldInfo={formElement.props}
+                  formManager={formManager}
+                  formValues={formValues}
+                  formActions={formActions}
+                  hiddenFields={hiddenFields}
+                  disabledFields={disabledFields}
+                  formValuesChangeCallBk={props.formValuesChangeCallBk}
+                />
+              );
+            } else if (
+              formElement.type === "field" &&
+              formElement.mode === "node"
+            ) {
+              return (
+                <Grid2
+                  key={index}
+                  size={
+                    formElement?.props?.formProps?.fieldSize || {
+                      lg: 3,
+                      md: 6,
+                      xs: 12,
+                    }
+                  }
+                  sx={{ padding: 1, width: "100%" }}
+                >
+                  <formElement.node
+                    formManager={formManager}
+                    formValues={formValues}
+                  />
+                </Grid2>
+              );
+            }
+          })}
+        </Grid2>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+      >
+        {formValues[props?.keyColumnName || "id"] ? (
+          props?.attachment ? (
+            <Tooltip title="Attachments">
+              <IconButton
+                onClick={() => {
+                  setAttachmentWindowState(true);
+                }}
+              >
+                <FontAwesomeIcon icon="paperclip" />
+              </IconButton>
+            </Tooltip>
+          ) : null
+        ) : null}
+        {formValues[props?.keyColumnName || "id"] ? (
+          props?.workFlowDocumentCode ? (
+            <Tooltip title="Approvals">
+              <IconButton
+                onClick={() => {
+                  setWorkflowWindowState(true);
+                }}
+              >
+                <FontAwesomeIcon icon="stamp" />
+              </IconButton>
+            </Tooltip>
+          ) : null
+        ) : null}
+        {props?.actions ? (
+          props.actions.map((action: RecordAction) => {
+            if (action?.isIdRequired === false) {
+              return <FormAction {...action} record={formValues} />;
+            } else if (formValues[props?.keyColumnName || "id"]) {
+              if (action?.formActionProps?.enabled === true) {
+                return <FormAction {...action} record={formValues} />;
+              } else {
+                return <></>;
+              }
+            }
+          })
+        ) : (
+          <></>
+        )}
+        <div style={{ flex: 1 }}></div>
+        {props?.saveButtonSpecs?.hidden ? (
+          <></>
+        ) : (
+          <Button
+            variant={
+              props?.saveButtonSpecs?.actionButtonVariant
+                ? props.saveButtonSpecs.actionButtonVariant
+                : "contained"
+            }
+            sx={{ m: 1 }}
+            startIcon={
+              props?.saveButtonSpecs?.icon ? (
+                <FontAwesomeIcon icon={props.saveButtonSpecs.icon} />
+              ) : null
+            }
+            color={
+              props?.saveButtonSpecs?.actionButtonColor
+                ? props.saveButtonSpecs.actionButtonColor
+                : "primary"
+            }
+            onClick={formManager.handleSubmit(
+              (values) => {
+                saveRecord(values);
+              },
+              (errors) => {
+                toast.error(
+                  "Form Data is not valid, make sure you have all field with valid data"
+                );
+                console.log("form validation error", errors);
+              }
+            )}
+          >
+            {t(props?.saveButtonSpecs?.label || "SAVE_BTN_LABEL")}
+          </Button>
+        )}
+
+        {props?.cancelButtonSpecs?.hidden ? (
+          <></>
+        ) : (
+          <Button
+            variant={
+              props?.cancelButtonSpecs?.actionButtonVariant
+                ? props.cancelButtonSpecs.actionButtonVariant
+                : "contained"
+            }
+            startIcon={
+              props?.cancelButtonSpecs?.icon ? (
+                <FontAwesomeIcon icon={props.cancelButtonSpecs.icon} />
+              ) : null
+            }
+            color={
+              props?.cancelButtonSpecs?.actionButtonColor
+                ? props.cancelButtonSpecs.actionButtonColor
+                : "error"
+            }
+            sx={{ m: 1 }}
+            onClick={() => {
+              if (props?.formCloseCallBk) {
+                props.formCloseCallBk();
+              }
+              formManager.reset(initialValues);
+            }}
+          >
+            {t(props?.cancelButtonSpecs?.label || "CANCEL_BTN_LABEL")}
+          </Button>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default TemplateForm;