form-craft-package 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/custom-hooks/use-preserved-form-items.hook.ts

@@ -3,7 +3,6 @@ import { FormPreservedItemKeys } from '../../../enums'
 
 export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues => {
   const baseServerUrl = Form.useWatch(FormPreservedItemKeys.BaseServerUrl, { form: formRef, preserve: true })
-  const companyKey = Form.useWatch(FormPreservedItemKeys.CompanyKey, { form: formRef, preserve: true })
   const isGeneratingPdf = Form.useWatch(FormPreservedItemKeys.IsGeneratingPDF, { form: formRef, preserve: true })
   const hasSignature = Form.useWatch(FormPreservedItemKeys.HasSignature, { form: formRef, preserve: true })
   const inPreviewMode = Form.useWatch(FormPreservedItemKeys.InPreviewMode, { form: formRef, preserve: true })
@@ -15,7 +14,6 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
 
   return {
     [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
-    [FormPreservedItemKeys.CompanyKey]: companyKey,
     [FormPreservedItemKeys.SubmissionPdfConfig]: submissionPdfConfig,
     [FormPreservedItemKeys.IsGeneratingPDF]: isGeneratingPdf,
     [FormPreservedItemKeys.HasSignature]: hasSignature,

package/src/components/form/1-list/index.tsx

@@ -29,7 +29,7 @@ function FormDataListComponent({
   >()
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
-  const dataListHeaderContext = { formId, userId, attachmentBaseUrl, formName }
+  const dataListHeaderContext = { formId, userId, attachmentBaseUrl, formName, companyKey }
 
   useEffect(() => {
     if (formId) {

package/src/components/form/1-list/table.tsx

@@ -46,7 +46,7 @@ export default function FormDataListTableComponent({
     pagination: DEFAULT_PAGINATION,
   })
 
-  const { attachmentBaseUrl, userId, formId, formName, formRef } = dataListHeaderContext
+  const { attachmentBaseUrl, userId, formId } = dataListHeaderContext
 
   useEffect(() => {
     setIsHandlingSchema(true)
@@ -77,7 +77,7 @@ export default function FormDataListTableComponent({
       if (elementsWithOptions_key.length > 0)
         optionKeyValuePair = await extractElementsOptions(layoutConfig?.elements ?? {}, elementsWithOptions_key)
 
-      setTableColumns(generateTableColumns(columns, optionKeyValuePair, { attachmentBaseUrl, formName, formRef }))
+      setTableColumns(generateTableColumns(columns, optionKeyValuePair, dataListHeaderContext))
       setHeaderLayoutConfig({
         layouts: header.layouts,
         elements: appendOptionsFromDetailsLayout(header.elements, layoutConfig?.elements),
@@ -107,7 +107,7 @@ export default function FormDataListTableComponent({
       setIsHandlingSchema(false)
       isFinishedHandlingRef.current = true
     },
-    [attachmentBaseUrl, formName, userId, formId, formRef, currentBreakpoint],
+    [attachmentBaseUrl, userId, formId, dataListHeaderContext],
   )
 
   useEffect(() => {
@@ -225,4 +225,5 @@ export interface IDataListHeaderContext {
   formName?: string
   parentInfo?: IDataListParentInfo
   formRef?: FormInstance
+  companyKey?: string
 }

package/src/components/form/2-details/index.tsx

@@ -50,11 +50,10 @@ export default function FormDataDetailsComponent({
     if (formDataRef)
       formDataRef.setFieldsValue({
         [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
-        [FormPreservedItemKeys.CompanyKey]: companyKey,
         [FormPreservedItemKeys.IsPublic]: isPublic,
         [FormPreservedItemKeys.InPreviewMode]: false,
       })
-  }, [formDataRef, baseServerUrl, companyKey, isPublic])
+  }, [formDataRef, baseServerUrl, isPublic])
 
   const fetchFormData = useCallback(
     (dFormId?: number, dateFields: string[] = []) => {
@@ -121,8 +120,8 @@ export default function FormDataDetailsComponent({
   }, [formId, formKey, isPublic, formDataRef, fetchFormData])
 
   const formContext = useMemo(
-    () => ({ formId, formKey, formDataId, formRef: formDataRef, formName }),
-    [formDataId, formDataRef, formName, formId, formKey],
+    () => ({ formId, formKey, formDataId, formRef: formDataRef, formName, companyKey }),
+    [formDataId, formDataRef, formName, formId, formKey, companyKey],
   )
 
   if (loadings.layout || loadings.data) return <FormDataListSkeleton_Details />

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -77,6 +77,7 @@ interface ILayoutRendererRow {
 export interface IFormContext {
   formDataId?: string
   formRef?: FormInstance
+  companyKey?: string
   formName?: string
   formKey?: string
   formId?: number

package/src/components/form/layout-renderer/3-element/1-dynamic-button/index.tsx

@@ -204,7 +204,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
           warning({ message: 'Data id was not found!' })
           break
         }
-        onGenerateReport(formName, formDataId)
+        onGenerateReport()
         setTimeout(() => setLoading(false), 500)
         break
 
@@ -227,7 +227,6 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     baseDynamicUrl,
     formDataId,
     isPublic,
-    formName,
     onCustomFunctionCall,
     onDuplicateData,
     onDeleteData,

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-create-data.hook.ts

@@ -19,19 +19,18 @@ export const useCreateDataWithPdfActions = ({
   onError: onCreateError,
   onFinal: onCreateFinal,
   onGenerateError,
-  formRef,
-  formKey,
-  formId,
-  formName,
+  ...formContext
 }: {
   setDataLoadingType: (type: FormLoadingModalTypeEnum) => void
   onGenerateError: () => void
 } & IOnSuccessFunctions &
   IFormContext) => {
+  const { formRef, formKey, formId, formName, companyKey } = formContext
+
   const navigate = useNavigate()
   // const { isModalOpen: isSuccessModalOpen, isPendingTransition: isSuccessModalPending, openModal: openSuccessModal, closeModal: closeSuccessModal } = useLazyModalOpener()
   const { errorModal, confirmModal } = useNotification()
-  const { baseServerUrl, companyKey, submissionPdfConfig, isPublic } = useFormPreservedItemValues(formRef)
+  const { baseServerUrl, submissionPdfConfig, isPublic } = useFormPreservedItemValues(formRef)
 
   const onCreateNewData = useCallback(
     (generatedPdfBlobName?: string) => {

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-generate-report.hook.tsx

@@ -7,7 +7,7 @@ import { useNotification } from '../../../../common/custom-hooks'
 import { fetchFormDataAsLookup, renderData } from '../../../../../functions/forms'
 import client from '../../../../../functions/axios-handler'
 import { parseJSON } from '../../../../../functions/forms/json-handlers'
-import { FieldElementOptionSourceEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../../../enums'
+import { FieldElementOptionSourceEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../../../enums'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
 
@@ -18,67 +18,58 @@ export const useGenerateReportAction = ({
   onSuccess,
   onError,
   onFinal,
-  formRef,
+  ...formContext
 }: IOnSuccessFunctions & IFormContext) => {
+  const { companyKey, formName, formDataId } = formContext
   const { warning } = useNotification()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [selectedTemplate, setSelectedTemplate] = useState(undefined)
   const [templateReports, setTemplateReports] = useState<IFormTemplateReport[]>([])
   const [loading, setLoading] = useState(false)
   const [formData, setFormData] = useState<{ [key: string]: any }>({})
-  const companyKeyRef = useRef('')
   const selectedDataFormIdRef = useRef<number | undefined>()
 
-  const onGenerateReport = useCallback(
-    async (formName: string, formDataId: string) => {
-      setLoading(true)
-      setIsModalOpen(true)
-      try {
-        const storedData = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
-        if (storedData) {
-          const parsedData: IDynamicForm[] = JSON.parse(storedData)
-          const form = parsedData.find((entry) => entry.name === formName)
+  const onGenerateReport = useCallback(async () => {
+    setLoading(true)
+    setIsModalOpen(true)
+    try {
+      const storedData = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
+      if (storedData) {
+        const parsedData: IDynamicForm[] = JSON.parse(storedData)
+        const form = parsedData.find((entry) => entry.name.toLowerCase() === formName)
 
-          if (form) {
-            selectedDataFormIdRef.current = form.id
-            client
-              .get(`/api/form/${form.id}`)
-              .then((res) => {
-                if (res.status === 200) {
-                  const parsedFormData: IFormSchema | null = parseJSON(res.data.data)
-                  if (parsedFormData) {
-                    const preservedFormValues = formRef?.getFieldsValue(true) ?? {}
-                    companyKeyRef.current = preservedFormValues.companyKey ?? ''
-
-                    const formDataListFormKey =
-                      preservedFormValues[`${FormPreservedItemKeys.FormDataListElementKey}_${form.id}`]
-
-                    if (formDataListFormKey) {
-                      const formDataList = preservedFormValues[formDataListFormKey] ?? []
-                      const formDataRowFormData =
-                        formDataList.find((d: { [key: string]: string | number }) => d.id === formDataId) ?? {}
-
-                      setFormData(formDataRowFormData)
-                    } else {
-                      const mainFormData = formRef?.getFieldsValue() ?? {}
-                      setFormData(mainFormData)
-                    }
-
-                    const reports = parsedFormData.generateConfig.templateReports ?? []
-                    setTemplateReports(reports)
-                  }
+        if (form) {
+          selectedDataFormIdRef.current = form.id
+          client
+            .get(`/api/form/${form.id}`)
+            .then((res) => {
+              if (res.status === 200) {
+                const parsedFormData: IFormSchema | null = parseJSON(res.data.data)
+                if (parsedFormData) {
+                  const reports = parsedFormData.generateConfig.templateReports ?? []
+                  if (reports.length)
+                    client
+                      .post(`/api/report/data/${form.id}`, {
+                        joins: parsedFormData.generateConfig.formJoins,
+                        match: JSON.stringify({ $expr: { $eq: [`$_id`, { $toObjectId: formDataId }] } }),
+                      })
+                      .then((res) => {
+                        if (res.status === 200) {
+                          setFormData(res.data[0])
+                          setTemplateReports(reports)
+                        }
+                      })
                 }
-              })
-              .finally(() => setLoading(false))
-          } else setLoading(false)
+              }
+            })
+            .finally(() => setLoading(false))
         } else setLoading(false)
-      } catch (error) {
-        console.error('Error reading or parsing localStorage data', error)
-        setLoading(false)
-      }
-    },
-    [templateReports, formRef],
-  )
+      } else setLoading(false)
+    } catch (error) {
+      console.error('Error reading or parsing localStorage data', error)
+      setLoading(false)
+    }
+  }, [templateReports, formName, formDataId])
 
   const ChooseTemplateReportModal = isModalOpen ? (
     <Modal
@@ -98,14 +89,11 @@ export const useGenerateReportAction = ({
             title={selectedTemplate ? '' : 'Please select a template to continue!'}
             loading={loading}
             onClick={async () => {
-              if (!companyKeyRef.current) {
+              if (!companyKey) {
                 warning({ message: 'Company was not found!' })
                 return
               }
 
-              const { Data, ...restFormData } = formData
-              const selectedFormData = { ...restFormData, ...Data }
-
               setLoading(true)
               const selectedTemplateInfo: IFormTemplateReport = templateReports.find(
                 (t: IFormTemplateReport) => t.fileBlobName === selectedTemplate,
@@ -113,21 +101,24 @@ export const useGenerateReportAction = ({
 
               const replacements = await Promise.all(
                 selectedTemplateInfo.replacements.map(async (rep) => {
+                  const value = rep.field.split('.').reduce((curr, n) => curr[n] ?? {}, formData)
+
                   if (!!rep.optionSource) {
                     if (rep.optionSource.type === FieldElementOptionSourceEnum.Static) {
                       return {
                         placeholder: rep.placeholder,
                         value: renderData(
-                          rep.optionSource.options.find((op) => op.id === selectedFormData[rep.field])?.value,
+                          rep.optionSource.options.find((op) => op.id === (value as unknown as string))?.value,
                           rep.renderConfig,
                         ),
                       }
                     } else if (rep.optionSource.type === FieldElementOptionSourceEnum.DynamicForm) {
                       const formDataResData = await fetchFormDataAsLookup(rep.optionSource.form.id)
+
                       return {
                         placeholder: rep.placeholder,
                         value: renderData(
-                          formDataResData.find((data) => data.id === selectedFormData[rep.field])?.[
+                          formDataResData.find((data) => data.id === (value as unknown as string))?.[
                             rep.optionSource.form.field
                           ],
                           rep.renderConfig,
@@ -137,7 +128,7 @@ export const useGenerateReportAction = ({
                   }
                   return {
                     placeholder: rep.placeholder,
-                    value: renderData(selectedFormData[rep.field], rep.renderConfig),
+                    value: renderData(value, rep.renderConfig),
                     type: rep.type,
                   }
                 }),
@@ -145,10 +136,10 @@ export const useGenerateReportAction = ({
 
               client
                 .post(
-                  `/api/attachment/template/${companyKeyRef.current}/${selectedTemplateInfo.templateName}`,
+                  `/api/attachment/template/${companyKey}/${selectedTemplateInfo.fileBlobName}`,
                   replacements.map((r) => ({
                     key: r.placeholder,
-                    value: r.value,
+                    value: r.value?.toString() ?? '-',
                     type: r.type,
                   })),
                   { responseType: 'blob' },

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-save-signature.hook.ts

@@ -8,8 +8,8 @@ import { IFormContext } from '../../1-row'
 /* --------------------------------------------------------------------------
   Saves a signature by converting base64 data to a file.
 -------------------------------------------------------------------------- */
-export const useSaveSignatureAction = ({ formRef }: IFormContext) => {
-  const { companyKey, isPublic } = useFormPreservedItemValues(formRef)
+export const useSaveSignatureAction = ({ formRef, companyKey }: IFormContext) => {
+  const { isPublic } = useFormPreservedItemValues(formRef)
 
   const saveSignature = useCallback(async () => {
     if (!formRef) return

package/src/components/form/layout-renderer/3-element/3-read-field-data.tsx

@@ -12,11 +12,11 @@ export default function LayoutRenderer_ReadFieldData({
   elementProps,
   style = {},
 }: ILayoutRenderer_ReadFieldData) {
-  const { formRef } = formContext
+  const { formRef, companyKey } = formContext
   const fieldValue = elementProps.isValueEvaluated
     ? undefined
     : Form.useWatch(elementProps.field, { form: formRef, preserve: true })
-  const { baseServerUrl, companyKey } = useFormPreservedItemValues(formRef)
+  const { baseServerUrl } = useFormPreservedItemValues(formRef)
 
   const formValues = Form.useWatch([], { form: formRef, preserve: true })
 

package/src/components/form/layout-renderer/3-element/6-signature.tsx

@@ -15,10 +15,10 @@ export default function LayoutRenderer_Signature({
   isDisabled,
   formContext,
 }: ILayoutRenderer_Signature) {
-  const { formRef, formDataId } = formContext
+  const { formRef, formDataId, companyKey } = formContext
   const sigCanvasRef = useRef<SignatureCanvas>(null)
   const savedSignatureBlobName = Form.useWatch(formItem.path, formRef)
-  const { isGeneratingPdf, baseServerUrl, companyKey, inPreviewMode } = useFormPreservedItemValues(formRef)
+  const { isGeneratingPdf, baseServerUrl, inPreviewMode } = useFormPreservedItemValues(formRef)
 
   useEffect(() => {
     if (isDisabled) sigCanvasRef.current?.off()

package/src/components/form/layout-renderer/3-element/7-file-upload.tsx

@@ -8,7 +8,6 @@ import { useNotification } from '../../../common/custom-hooks'
 import { FaTrashAlt } from 'react-icons/fa'
 import { saveFile } from '../../../../functions/forms/form'
 import { IElementBaseProps } from '.'
-import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { IFormContext } from '../1-row'
 
 export default function LayoutRenderer_FileUpload({
@@ -18,13 +17,11 @@ export default function LayoutRenderer_FileUpload({
   uploadRules,
   isDisabled,
 }: ILayoutRenderer_FileUpload) {
-  const { formRef } = formContext
+  const { formRef, companyKey } = formContext
   const { warningModal, confirmModal } = useNotification()
   const [loading, setLoading] = useState(false)
   const savedSignatureBlobName = Form.useWatch(formItem.path, formRef)
 
-  const { companyKey } = useFormPreservedItemValues(formRef)
-
   const deleteSavedFile = useCallback(
     (blobName: string) => {
       setLoading(true)

package/src/components/form/layout-renderer/3-element/9-form-data-render.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import FormDataListTableComponent from '../../1-list/table'
 import FormDataListSkeleton_Table from '../../../common/loading-skeletons/table'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
-import { FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../../enums'
+import { FilterConfigTypeEnum } from '../../../../enums'
 import client from '../../../../functions/axios-handler'
 import { IFormContext } from '../1-row'
 import {
@@ -135,10 +135,7 @@ export default function LayoutRenderer_LoadFormData({
             if (res.status === 200) {
               const resData = res.data
 
-              if (!tableHeaderFilters) {
-                formRef?.setFieldValue(`${FormPreservedItemKeys.FormDataListElementKey}_${lastChildId}`, formItem.path)
-                formRef?.setFieldValue(formItem.path, resData)
-
+              if (!tableHeaderFilters)
                 lastChildInfo.current = {
                   ...lastChildInfo.current,
                   parentInfo: {
@@ -159,7 +156,6 @@ export default function LayoutRenderer_LoadFormData({
                     ),
                   },
                 }
-              }
 
               setDataList({ data: resData, total: resData.length })
             }

package/src/enums/form.enum.ts

@@ -178,13 +178,11 @@ export enum FormElementConditionalKeyEnum {
 }
 export enum FormPreservedItemKeys {
   BaseServerUrl = 'baseServerUrl',
-  CompanyKey = 'companyKey',
   SubmissionPdfConfig = 'submissionPdfConfig',
   IsGeneratingPDF = 'isGeneratingPdf',
   HasSignature = 'hasSignature',
   InPreviewMode = 'inPreviewMode',
   IsPublic = 'isPublic',
-  FormDataListElementKey = 'formDataListElementKey',
 }
 export enum DataCategoryEnum {
   Number = 'Number',

package/src/functions/companies/FontSelector.tsx

@@ -11,31 +11,22 @@ const FONTS = [
 ]
 
 export default function FontSelector({ onFontSelect, initialFont }: FontSelectorProps) {
-  const [selectedFont, setSelectedFont] = useState(initialFont)
-  const [isFontLoaded, setIsFontLoaded] = useState(false) // Track if font is loaded
-
+  const [selectedFont, setSelectedFont] = useState(initialFont || 'Inter')
   useEffect(() => {
-    const selectedFontData = FONTS.find((f) => f.name === selectedFont)
-    if (selectedFontData) {
-      const fontUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
-        selectedFontData.importName,
-      )}:wght@400;700&display=swap`
-
-      // Remove previously loaded fonts
-      document.querySelectorAll('link[data-font]').forEach((link) => link.remove())
+    setSelectedFont(initialFont || 'Inter')
+  }, [initialFont])
+  useEffect(() => {
+    const font = FONTS.find((f) => f.name === selectedFont)
+    if (!font) return
 
-      // Append new font link
-      const link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.href = fontUrl
-      link.setAttribute('data-font', selectedFontData.name)
-      document.head.appendChild(link)
+    const id = `google-font-${font.importName}`
+    if (document.getElementById(id)) return
 
-      // Ensure the font is actually loaded before applying it
-      document.fonts.ready.then(() => {
-        setIsFontLoaded(true) // Mark font as loaded
-      })
-    }
+    const link = document.createElement('link')
+    link.id = id
+    link.rel = 'stylesheet'
+    link.href = `https://fonts.googleapis.com/css2?family=${font.importName}&display=swap`
+    document.head.appendChild(link)
   }, [selectedFont])
 
   return (
@@ -51,9 +42,8 @@ export default function FontSelector({ onFontSelect, initialFont }: FontSelector
                   ? 'border-primary bg-primary text-white shadow-lg scale-105'
                   : 'border-gray-300 bg-white'
               }`}
-            style={{ fontFamily: isFontLoaded ? font.name : 'inherit' }}
+            style={{ fontFamily: font.name }}
             onClick={() => {
-              setIsFontLoaded(false)
               setSelectedFont(font.name)
               onFontSelect(font.name)
             }}

package/src/functions/forms/data-render-functions.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { AlignTypeEnum, CountryEnum, DataRenderTypeEnum, PatternPlacholdersEnum } from '../../enums'
 import { DynamicFormButtonRender } from '../../components/form/layout-renderer/3-element/1-dynamic-button'
-import { Dropdown, FormInstance, Image } from 'antd'
+import { Dropdown, Image } from 'antd'
 import { FaCaretDown } from 'react-icons/fa6'
 import { INTERNATIONALIZATION_DATA } from '../../constants'
 import { evaluateCondition } from './evaluate-condition'
@@ -18,13 +18,14 @@ import {
   IFormDataListColumn,
   ITableColumn,
 } from '../../types'
+import { IDataListHeaderContext } from '../../components/form/1-list/table'
 
 export const generateTableColumns = (
   elements: IFormDataListColumn[],
   optionKeyValuePair: { [key: string]: string },
-  contextValues: { attachmentBaseUrl?: string; formName?: string; formRef?: FormInstance } = {},
+  contextValues: IDataListHeaderContext = {},
 ) => {
-  const { attachmentBaseUrl, formName, formRef } = contextValues
+  const { attachmentBaseUrl } = contextValues
 
   return elements.map((el) => {
     const col: ITableColumn = {
@@ -64,7 +65,7 @@ export const generateTableColumns = (
                         label: (
                           <DynamicFormButtonRender
                             displayStateProps={{ btnProps }}
-                            formContext={{ formRef, formDataId: rowData?.id, formName }}
+                            formContext={{ formDataId: rowData?.id, ...contextValues }}
                           />
                         ),
                       })),
@@ -80,7 +81,7 @@ export const generateTableColumns = (
               ) : (
                 <DynamicFormButtonRender
                   displayStateProps={{ btnProps: (el.renderConfig as IDataRender_Buttons).buttons[0] }}
-                  formContext={{ formRef, formDataId: rowData?.id, formName }}
+                  formContext={{ formDataId: rowData?.id, ...contextValues }}
                 />
               )}
             </div>

package/src/types/companies/index.ts

@@ -23,7 +23,14 @@ export interface ISiteMenuItem {
     customLink?: string
     children?: ISiteMenuItem[]
 }
-
+export interface IExtendedSiteMenuItem extends ISiteMenuItem {
+    isMenuGroup?: boolean;
+}
+export interface MenuBuilderProps {
+    items: ISiteMenuItem[]
+    onChange?: (menu: ISiteMenuItem[]) => void
+    initialValue: ISiteMenuItem[]
+}
 
 export type ISiteMenus = ISiteMenuItem[]
 export interface IPrivateConfig {

package/src/types/companies/site-layout/authenticated/index.tsx

@@ -1,9 +1,9 @@
 import { FaCaretDown, FaTimes, FaUser } from 'react-icons/fa'
 import { HiMenu } from 'react-icons/hi'
-import { ICompanyConfig, ILayoutTemplateProps, ISiteMenuItem } from '../..'
+import { ICompanyConfig, ILayoutTemplateProps, IExtendedSiteMenuItem } from '../..'
 import { Link } from 'react-router-dom'
 import { constructDynamicFormHref, isEncodedURI } from '../../../../functions/forms'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Button, Drawer, Dropdown, Layout, Menu } from 'antd'
 import * as FaIcons from 'react-icons/fa'
 
@@ -16,14 +16,31 @@ export const layoutTemplates = [
       const siteConfigs = config?.siteLayout?.siteConfigs
       const navigationWidth = siteConfigs?.custom?.navigationWidth || 200
       const contentPadding = siteConfigs?.custom?.contentPadding || 20
-      const renderMenuItem = (form: ISiteMenuItem, level = 0) => {
-        const href = constructDynamicFormHref(form.name)
+      const [expandedMenus, setExpandedMenus] = useState<{ [key: number]: boolean }>({})
+      useEffect(() => {
+        const initialExpandedStates: Record<number, boolean> = {}
+        config?.siteMenus?.forEach((item) => {
+          if (item.children && item.children.length > 0) {
+            initialExpandedStates[item.id] = true
+          }
+        })
+        setExpandedMenus(initialExpandedStates)
+      }, [config])
+
+      const renderMenuItem = (form: IExtendedSiteMenuItem, level = 0) => {
+        let href = form.customLink === '' ? '#' : form.customLink || constructDynamicFormHref(form.name)
+        let isParentMenu = href === '#' && form.children && form.children.length > 0
         const IconComponent = form.icon ? (FaIcons as any)[form.icon] : null
+        const isExpanded = expandedMenus[form.id]
 
+        const toggleMenu = (id: number) => {
+          setExpandedMenus((prev) => ({ ...prev, [id]: !prev[id] }))
+        }
         return (
-          <div key={form.id}>
+          <div key={form.id} className="menu-item">
             <Link
               to={href}
+              onClick={isParentMenu ? () => toggleMenu(form.id) : undefined}
               style={{
                 width: `${navigationWidth - 25}px`,
                 borderRadius: `${siteConfigs?.Link.borderRadius}px`,
@@ -35,6 +52,9 @@ export const layoutTemplates = [
                   : siteConfigs?.Link.colors.text,
                 paddingLeft: `${level * 16 + 20}px`,
               }}
+              className={`flex items-center gap-x-3 py-2 px-5 text-16 leading-4 transition-all duration-200 ${
+                isActive(window.location.pathname, href) ? 'bg-opacity-25 text-opacity-25 font-semibold' : ''
+              }`}
               onMouseEnter={(e) => {
                 e.currentTarget.style.backgroundColor = siteConfigs?.Link.colors.hoverBackground || ''
                 e.currentTarget.style.color = siteConfigs?.Link.colors.hoverText || ''
@@ -47,24 +67,26 @@ export const layoutTemplates = [
                   ? siteConfigs?.Link.colors.activeText || ''
                   : siteConfigs?.Link.colors.text || ''
               }}
-              className={`flex items-center gap-x-3 py-2 px-5 text-16 leading-4 transition-all duration-200 bg-white text-primary hover:bg-opacity-25 hover:text-opacity-25 ${
-                isActive(window.location.pathname, href) ? `font-semibold` : ``
-              }`}
             >
               <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
                 {IconComponent ? (
-                  <IconComponent className="w-4 h-4 text-black" />
+                  <IconComponent className="w-4 h-4" />
                 ) : (
                   <img alt="" src={form.icon ?? ''} className="w-4 h-4 object-contain" />
                 )}
               </div>
-              <span className="flex-grow ">{form.name}</span>
+              <span className="flex-grow">{form.name}</span>
+              {isParentMenu &&
+                (isExpanded ? <FaIcons.FaAngleUp className="w-4 h-4" /> : <FaIcons.FaAngleDown className="w-4 h-4" />)}
             </Link>
 
-            {form?.children?.map((child) => renderMenuItem(child, level + 1))}
+            {form.children && expandedMenus[form.id] && (
+              <div className="submenu">{form.children.map((child) => renderMenuItem(child, level + 1))}</div>
+            )}
           </div>
         )
       }
+
       /* Profile Menu */
       const menu = (
         <Menu>
@@ -76,7 +98,7 @@ export const layoutTemplates = [
         </Menu>
       )
       return (
-        <Layout>
+        <Layout className="h-screen overflow-y-auto overflow-x-hidden">
           <Header className="sticky top-0 z-40 flex items-center shadow-sm justify-between px-1">
             {/* Logo */}
             <div className="flex p-2">
@@ -105,7 +127,7 @@ export const layoutTemplates = [
               }
             >
               {config?.siteIdentity && config?.siteLayout && config?.siteMenus && (
-                <div className="flex flex-col">
+                <div className="flex flex-col overflow-y-auto">
                   {navigationTemplates
                     .find((template) => template.name === 'navigation_1')
                     ?.value({
@@ -131,9 +153,9 @@ export const layoutTemplates = [
               </Dropdown>
             </div>
           </Header>
-          <Layout>
+          <Layout className="overflow-hidden">
             {/* Side Menu */}
-            <Sider width={navigationWidth} className={`${isPreview ? 'flex' : 'hidden lg:flex'} h-screen`}>
+            <Sider width={navigationWidth} className={`${isPreview ? 'flex' : 'hidden lg:flex'}`}>
               <div className="flex flex-col px-1 gap-2 py-2">
                 {config?.siteMenus ? (
                   config?.siteMenus?.map((form) => renderMenuItem(form))
@@ -145,7 +167,9 @@ export const layoutTemplates = [
               </div>
             </Sider>
             {/* Content */}
-            <Content style={{ padding: `${contentPadding}px` }}>{children}</Content>
+            <Content style={{ padding: `${contentPadding}px` }} className="overflow-y-auto">
+              {children}
+            </Content>
           </Layout>
         </Layout>
       )
@@ -184,8 +208,15 @@ export const layoutTemplates = [
       const siteConfigs = config?.siteLayout?.siteConfigs
       const contentPadding = siteConfigs?.custom?.contentPadding || 20
       const navigationWidth = siteConfigs?.custom?.navigationWidth || 200
-      const renderMenuItem = (form: ISiteMenuItem, level = 0) => {
-        const href = constructDynamicFormHref(form.name)
+
+      const renderMenuItem = (form: IExtendedSiteMenuItem, level = 0) => {
+        let href = ''
+        if (form.customLink) {
+          href = form.customLink
+        } else {
+          href = constructDynamicFormHref(form.name)
+        }
+
         const IconComponent = form.icon ? (FaIcons as any)[form.icon] : null
 
         const hasChildren = form.children && form.children.length > 0
@@ -193,6 +224,7 @@ export const layoutTemplates = [
         return (
           <div key={form.id} className="relative group">
             <Link
+              target={form.customLink ? '_blank' : '_self'}
               to={href}
               style={{
                 width: `${navigationWidth - 25}px`,
@@ -223,7 +255,7 @@ export const layoutTemplates = [
             >
               <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
                 {IconComponent ? (
-                  <IconComponent className="w-4 h-4 text-black" />
+                  <IconComponent className="w-4 h-4 " />
                 ) : (
                   <img alt="" src={form.icon ?? ''} className="w-4 h-4 object-contain" />
                 )}
@@ -352,14 +384,30 @@ export const layoutTemplates = [
       const navigationWidth = siteConfigs?.custom?.navigationWidth || 200
       const contentPadding = siteConfigs?.custom?.contentPadding || 20
       const isCollapsed = navigationWidth < 200
-      const renderMenuItem = (form: ISiteMenuItem, level = 0) => {
-        const href = constructDynamicFormHref(form.name)
+      const [expandedMenus, setExpandedMenus] = useState<{ [key: number]: boolean }>({})
+      useEffect(() => {
+        const initialExpandedStates: Record<number, boolean> = {}
+        config?.siteMenus?.forEach((item) => {
+          if (item.children && item.children.length > 0) {
+            initialExpandedStates[item.id] = true
+          }
+        })
+        setExpandedMenus(initialExpandedStates)
+      }, [config])
+      const renderMenuItem = (form: IExtendedSiteMenuItem, level = 0) => {
+        let href = form.customLink === '' ? '#' : form.customLink || constructDynamicFormHref(form.name)
+        let isParentMenu = href === '#' && form.children && form.children.length > 0
         const IconComponent = form.icon ? (FaIcons as any)[form.icon] : null
+        const isExpanded = expandedMenus[form.id]
 
+        const toggleMenu = (id: number) => {
+          setExpandedMenus((prev) => ({ ...prev, [id]: !prev[id] }))
+        }
         return (
-          <div key={form.id}>
+          <div key={form.id} className="menu-item">
             <Link
               to={href}
+              onClick={isParentMenu ? () => toggleMenu(form.id) : undefined}
               style={{
                 width: `${navigationWidth - 25}px`,
                 borderRadius: `${siteConfigs?.Link.borderRadius}px`,
@@ -371,6 +419,9 @@ export const layoutTemplates = [
                   : siteConfigs?.Link.colors.text,
                 paddingLeft: `${level * 16 + 20}px`,
               }}
+              className={`flex items-center gap-x-3 py-2 px-5 text-16 leading-4 transition-all duration-200 ${
+                isActive(window.location.pathname, href) ? 'bg-opacity-25 text-opacity-25 font-semibold' : ''
+              }`}
               onMouseEnter={(e) => {
                 e.currentTarget.style.backgroundColor = siteConfigs?.Link.colors.hoverBackground || ''
                 e.currentTarget.style.color = siteConfigs?.Link.colors.hoverText || ''
@@ -383,20 +434,22 @@ export const layoutTemplates = [
                   ? siteConfigs?.Link.colors.activeText || ''
                   : siteConfigs?.Link.colors.text || ''
               }}
-              className={`flex items-center gap-x-3 py-2 px-5 text-16 leading-4 transition-all duration-200 bg-white text-primary hover:bg-opacity-25 hover:text-opacity-25 ${
-                isActive(window.location.pathname, href) ? `font-semibold` : ``
-              }`}
             >
               <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
                 {IconComponent ? (
-                  <IconComponent className="w-4 h-4 text-black" />
+                  <IconComponent className="w-4 h-4" />
                 ) : (
                   <img alt="" src={form.icon ?? ''} className="w-4 h-4 object-contain" />
                 )}
               </div>
               <span className="flex-grow">{form.name}</span>
+              {isParentMenu &&
+                (isExpanded ? <FaIcons.FaAngleUp className="w-4 h-4" /> : <FaIcons.FaAngleDown className="w-4 h-4" />)}
             </Link>
-            {form?.children?.map((child) => renderMenuItem(child, level + 1))}
+
+            {form.children && expandedMenus[form.id] && (
+              <div className="submenu">{form.children.map((child) => renderMenuItem(child, level + 1))}</div>
+            )}
           </div>
         )
       }
@@ -554,7 +607,7 @@ export const navigationTemplates = [
       renderMenuItem,
     }: {
       config: ICompanyConfig
-      renderMenuItem: (form: ISiteMenuItem, level?: number) => JSX.Element
+      renderMenuItem: (form: IExtendedSiteMenuItem, level?: number) => JSX.Element
     }) => {
       return (
         <div className="flex flex-col">

package/src/types/forms/index.ts

@@ -57,6 +57,7 @@ export interface IFormDataListConfig {
 export interface IFormGenerateConfig {
   submissionPdf?: IFormSubmissionPdf
   templateReports?: IFormTemplateReport[]
+  formJoins?: IFormJoin[]
 }
 export interface IFormLayoutRow {
   nodeType: FormLayoutNodeEnum.Row
@@ -106,3 +107,10 @@ export type IFormLayoutElement =
   | IReCaptchaElement
   | IFormDataLoadElement
   | IColorPickerElement
+
+export interface IFormJoin {
+  formId: number
+  foreignField: string
+  localField: string
+  alias: string
+}