form-craft-package 1.7.0 → 1.7.2

package/package.json

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

package/src/components/common/custom-hooks/use-window-width.hook.ts

@@ -15,7 +15,7 @@ const useGetCurrentBreakpoint = (): DeviceBreakpointEnum => {
 
   if (!width) return DeviceBreakpointEnum.Default
 
-  // if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Mobile])) return DeviceBreakpointEnum.Mobile
+  if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.Mobile])) return DeviceBreakpointEnum.Mobile
 
   if (width < parseInt(DEVICE_BREAKPOINTS[DeviceBreakpointEnum.TabletPortrait]))
     return DeviceBreakpointEnum.TabletPortrait

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

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import client from '../../../functions/axios-handler'
 import { parseJSON } from '../../../functions/forms/json-handlers'
 import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
-import { IFormData, IFormDataListConfig, IFormSchema, IDndLayoutStructure_Responsive } from '../../../types'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
-import FormDataListTableComponent, { IReqDataConfig } from './table'
+import FormDataListTableComponent from './table'
+import { IFormDataListConfig, IFormSchema, IFormJoin, IDndLayoutElement, IFormDataListData } from '../../../types'
 
 function FormDataListComponent({
   formName,
@@ -15,14 +15,12 @@ function FormDataListComponent({
   onCustomFunctionCall,
 }: IFormDataListComponent) {
   const [loading, setLoading] = useState(true)
-  const [formData, setFormData] = useState<{ data: IFormData[]; total: number }>({ data: [], total: 0 })
-  const [dataListConfig, setDataListConfig] = useState<
-    | {
-        dataListConfig: IFormDataListConfig & { configForFormId: number }
-        detailsLayoutConfig: IDndLayoutStructure_Responsive
-      }
-    | undefined
-  >()
+  const [dataList, setDataList] = useState<{ data: IFormDataListData[]; total: number }>({ data: [], total: 0 })
+  const [listLayoutConfig, setListLayoutConfig] = useState<IDataListLayoutConfig>()
+
+  const dataProjectRef = useRef<{ [key: string]: string }>({})
+  const formJoinsRef = useRef<IFormJoin[]>([])
+  const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>(undefined)
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
   const dataListHeaderContext = { formId, userId, attachmentBaseUrl, formName, companyKey }
@@ -33,50 +31,115 @@ function FormDataListComponent({
         if (res.status === 200) {
           const parsedData: IFormSchema | null = parseJSON(res.data.data)
           if (parsedData) {
+            console.log(parsedData.dataListConfig)
+            const { columns, joins, pagination, defaultFilter, defaultSorter } = parsedData.dataListConfig
+
+            if (Array.isArray(columns))
+              dataProjectRef.current = columns.reduce(
+                (curr, c) => (c.key ? { ...curr, [c.key.replace(/\./g, '_')]: `$${c.key}` } : curr),
+                {},
+              )
+            if (Array.isArray(joins)) formJoinsRef.current = joins
+
+            const defaultReqData: IDataListReqData = {}
+            if (!pagination?.hasNoPagination) {
+              defaultReqData.skip = 0
+              defaultReqData.size = pagination?.defaultPageSize ?? 10
+            }
+            if (defaultSorter) defaultReqData.sort = JSON.stringify({ [defaultSorter.field]: defaultSorter.order })
+            if (defaultFilter?.config)
+              // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
+              defaultReqData.match = JSON.stringify(defaultFilter.config).replaceAll('@', '$')
+
+            defaultFilterReqDataRef.current = defaultReqData
+
+            fetchFormDataList(defaultReqData)
+
             // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
-            setDataListConfig({
-              dataListConfig: { ...parsedData.dataListConfig, configForFormId: formId },
-              detailsLayoutConfig: {
-                elements: parsedData.detailsConfig.elements,
-                layouts: parsedData.detailsConfig.layouts,
-              },
-            })
+            setListLayoutConfig({ configForFormId: formId, dataListConfig: parsedData.dataListConfig })
           }
         }
       })
     }
   }, [formId])
 
-  const fetchFormDataList = useCallback((reqData: IReqDataConfig, dynamicFormId?: number) => {
-    if (!reqData || !dynamicFormId) return
+  const fetchFormDataList = useCallback(
+    (reqData?: IDataListReqData) => {
+      if (!reqData || !formId) return
 
-    client
-      .post(`/api/formdata/list/${dynamicFormId}`, {
-        ...reqData,
-        pagination: {
-          number: reqData.pagination.current,
-          size: reqData.pagination.pageSize,
-        },
-      })
-      .then((res) => {
-        if (res.status === 200)
-          setFormData({
-            ...res.data,
-            data: res.data.data.map((d: IFormData) => {
-              const { data, ...restD } = d
-              return { ...restD, ...JSON.parse(data) }
-            }),
-          })
-      })
-      .finally(() => setLoading(false))
-  }, [])
+      if (!reqData.skip && defaultFilterReqDataRef.current?.skip) reqData.skip = defaultFilterReqDataRef.current.skip
+      if (!reqData.size && defaultFilterReqDataRef.current?.size) reqData.size = defaultFilterReqDataRef.current.size
+      if (!reqData.sort && defaultFilterReqDataRef.current?.sort) reqData.sort = defaultFilterReqDataRef.current.sort
+      if (!reqData.match && defaultFilterReqDataRef.current?.match)
+        reqData.match = defaultFilterReqDataRef.current.match
+
+      console.log({ reqData })
+
+      client
+        .post(`/api/report/data/${formId}`, {
+          joins: formJoinsRef.current,
+          ...reqData,
+          project: JSON.stringify(dataProjectRef.current),
+        })
+        .then((res) => {
+          if (res.status === 200) setDataList({ data: res.data.data, total: res.data.totalRecords })
+        })
+        .finally(() => setLoading(false))
+    },
+    [formId],
+  )
+
+  // useEffect(() => {
+  //   client.post('/api/report/data/86', {
+  //     joins: [
+  //       // {
+  //       //   formId: 85,
+  //       //   foreignField: '_id',
+  //       //   localField: 'Data.dId',
+  //       //   alias: '85',
+  //       // },
+  //       // {
+  //       //   formId: 84,
+  //       //   foreignField: '_id',
+  //       //   localField: '85.Data.cId',
+  //       //   alias: '84',
+  //       // },
+  //       // {
+  //       //   formId: 83,
+  //       //   foreignField: '_id',
+  //       //   localField: '84.Data.bId',
+  //       //   alias: '83',
+  //       // },
+  //       // {
+  //       //   formId: 82,
+  //       //   foreignField: '_id',
+  //       //   localField: '83.Data.aId',
+  //       //   alias: '82',
+  //       // },
+  //     ],
+  //     // match: JSON.stringify({ $expr: { $eq: ['$82._id', { $toObjectId: '67b7c0a5e46d36ac56ea6548' }] } }),
+  //     sort: JSON.stringify({
+  //       '82.Data.field1': MongoDbSortOrderEnum.Descending,
+  //       'Data.field1': MongoDbSortOrderEnum.Ascending,
+  //     }),
+  //     project: JSON.stringify({
+  //       Data_field1: '$Data.field1',
+  //       '85_Data_field1': '$85.Data.field1',
+  //       '84_Data_field1': '$84.Data.field1',
+  //       '83_Data_field1': '$83.Data.field1',
+  //       '82_Data_field1': '$82.Data.field1',
+  //     }),
+  //     skip: 0, // current
+  //     limit: 10, // pageSize
+  //   })
+  // }, [])
 
   return (
     <FormDataListTableComponent
-      {...dataListConfig}
-      dataList={formData}
+      layoutsConfigs={listLayoutConfig}
+      dataList={dataList}
       updateDataList={(reqData) => {
-        fetchFormDataList(reqData, formId)
+        fetchFormDataList(reqData)
       }}
       parentLoading={loading}
       loadingBlock={<FormDataListSkeleton_Table />}
@@ -95,3 +158,17 @@ type IFormDataListComponent = {
   formId?: number
   userId: string | number
 } & ICustomFunctionCall
+
+export interface IDataListReqData {
+  skip?: number
+  size?: number
+  sort?: string
+  match?: string
+}
+
+export type IDataListLayoutConfig =
+  | {
+      configForFormId: number
+      dataListConfig: IFormDataListConfig
+    }
+  | undefined

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

@@ -4,6 +4,7 @@ import {
   IDndLayoutStructure_Responsive,
   IFormData,
   IFormDataListConfig,
+  IFormDataListData,
   IFormDataTableColumn,
 } from '../../../types'
 import FormDataListHeaderComponent from './table-header'
@@ -20,10 +21,10 @@ import {
   FormDataListViewTypeEnum,
   MongoDbSortOrderEnum,
 } from '../../../enums'
+import { IDataListReqData, IDataListLayoutConfig } from '.'
 
 export default function FormDataListTableComponent({
-  dataListConfig,
-  detailsLayoutConfig,
+  layoutsConfigs,
   parentLoading,
   dataList,
   loadingBlock,
@@ -63,16 +64,15 @@ export default function FormDataListTableComponent({
     setIsHandlingSchema(true)
   }, [location.pathname])
 
-  useEffect(() => {
-    if (debouncedFilterReqData) updateDataList(debouncedFilterReqData)
-  }, [debouncedFilterReqData])
+  // useEffect(() => {
+  //   if (debouncedFilterReqData) updateDataList(debouncedFilterReqData)
+  // }, [debouncedFilterReqData])
 
   const handleDataListConfig = useCallback(
-    async (
-      config: IFormDataListConfig & { configForFormId?: number },
-      layoutConfig?: IDndLayoutStructure_Responsive,
-    ) => {
-      if (config.configForFormId && config.configForFormId !== formId) return
+    async (layoutsConfigs: IDataListLayoutConfig) => {
+      const { configForFormId, dataListConfig } = layoutsConfigs!
+
+      if (configForFormId !== formId) return
 
       const {
         columns = [],
@@ -81,42 +81,44 @@ export default function FormDataListTableComponent({
         defaultFilter,
         defaultSorter,
         ...restConfigs
-      } = config
+      } = dataListConfig
 
-      const elementsWithOptions_key = columns
-        .filter((op) => op.isSelectOption)
-        .map((op) => (op.key.includes('Data.') ? op.key.replace('Data.', '') : op.key))
+      console.log({ columns })
+
+      // TODO:
+      // const elementsWithOptions_key = columns.filter((op) => op.key && op.isSelectOption).map((op) => op.key)
 
       let optionKeyValuePair = {}
-      if (elementsWithOptions_key.length > 0)
-        optionKeyValuePair = await extractElementsOptions(layoutConfig?.elements ?? {}, elementsWithOptions_key)
+      // if (elementsWithOptions_key.length > 0)
+      //   optionKeyValuePair = await extractElementsOptions(elements ?? {}, elementsWithOptions_key)
 
       setTableColumns(generateTableColumns(columns, optionKeyValuePair, dataListHeaderContext))
       setHeaderLayoutConfig({
         layouts: header.layouts,
-        elements: appendOptionsFromDetailsLayout(header.elements, layoutConfig?.elements),
+        elements: header.elements,
+        // elements: appendOptionsFromDetailsLayout(header.elements, layoutConfig?.elements),
       })
       setOtherConfigs({ ...restConfigs, hasNoPagination: pagination?.hasNoPagination ?? false })
 
-      if (defaultFilter && defaultFilter.type !== FilterConfigTypeEnum.NoFilter)
-        defaultFilterRef.current = {
-          ...defaultFilterRef.current,
-          customFilter: defaultFilter.type === FilterConfigTypeEnum.ByAuthUser ? { createdById: userId } : {},
-          dynamicFilter: defaultFilter.config
-            ? // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
-              JSON.stringify(defaultFilter.config).replaceAll('@', '$')
-            : JSON.stringify({}),
-        }
-      defaultFilterRef.current = {
-        ...defaultFilterRef.current,
-        sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
-        pagination: {
-          current: 1,
-          pageSize: pagination?.defaultPageSize ?? 10,
-          showSizeChanger: pagination?.showSizeChanger ?? false,
-          pageSizeOptions: pagination?.pageSizeOptions ?? [],
-        },
-      }
+      // if (defaultFilter && defaultFilter.type !== FilterConfigTypeEnum.NoFilter)
+      //   defaultFilterRef.current = {
+      //     ...defaultFilterRef.current,
+      //     customFilter: defaultFilter.type === FilterConfigTypeEnum.ByAuthUser ? { createdById: userId } : {},
+      //     dynamicFilter: defaultFilter.config
+      //       ? // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
+      //         JSON.stringify(defaultFilter.config).replaceAll('@', '$')
+      //       : JSON.stringify({}),
+      //   }
+      // defaultFilterRef.current = {
+      //   ...defaultFilterRef.current,
+      //   sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
+      //   pagination: {
+      //     current: 1,
+      //     pageSize: pagination?.defaultPageSize ?? 10,
+      //     showSizeChanger: pagination?.showSizeChanger ?? false,
+      //     pageSizeOptions: pagination?.pageSizeOptions ?? [],
+      //   },
+      // }
 
       setIsHandlingSchema(false)
       isFinishedHandlingRef.current = true
@@ -125,8 +127,8 @@ export default function FormDataListTableComponent({
   )
 
   useEffect(() => {
-    if (dataListConfig) handleDataListConfig(dataListConfig, detailsLayoutConfig)
-  }, [dataListConfig, detailsLayoutConfig])
+    if (layoutsConfigs) handleDataListConfig(layoutsConfigs)
+  }, [layoutsConfigs])
 
   const tableColumnsFiltered = useMemo(
     () => tableColumns.filter((op) => !Array.isArray(op.hideScreens) || !op.hideScreens.includes(currentBreakpoint)),
@@ -156,39 +158,35 @@ export default function FormDataListTableComponent({
         onCustomFunctionCall={onCustomFunctionCall}
         {...dataListHeaderContext}
       />
-      {dataListConfig?.listType === FormDataListViewTypeEnum.Table && (
-        <Table<IFormData>
+      {(!otherConfigs || otherConfigs.listType === FormDataListViewTypeEnum.Table) && (
+        <Table<IFormDataListData>
           dataSource={dataList.data}
           columns={tableColumnsFiltered}
-          rowKey={(record) => record.id}
-          pagination={
-            otherConfigs?.hasNoPagination
-              ? false
-              : { ...defaultFilterRef.current.pagination, ...filterReqData?.pagination, total: dataList.total }
-          }
+          rowKey={(record) => record.id} // TODO: change this to _id
+          pagination={otherConfigs?.hasNoPagination ? false : { ...filterReqData?.pagination, total: dataList.total }}
           loading={parentLoading}
-          onChange={(cbPagination, _, sorter: SorterResult<IFormData> | SorterResult<IFormData>[]) => {
-            console.log('ON TABLE CHANGE', cbPagination, sorter)
-            setParentLoading(true)
-
-            setFilterReqData((c) => {
-              if (!c) return c
-
-              return {
-                ...c,
-                sort:
-                  sorter && (sorter as SorterResult<IFormData>).field
-                    ? {
-                        [(sorter as SorterResult<IFormData>).field as string]:
-                          (sorter as SorterResult<IFormData>).order === 'ascend'
-                            ? MongoDbSortOrderEnum.Ascending
-                            : MongoDbSortOrderEnum.Descending,
-                      }
-                    : {},
-                pagination: cbPagination as IPagination,
-              }
-            })
-          }}
+          // onChange={(cbPagination, _, sorter: SorterResult<IFormData> | SorterResult<IFormData>[]) => {
+          //   console.log('ON TABLE CHANGE', cbPagination, sorter)
+          //   setParentLoading(true)
+
+          //   setFilterReqData((c) => {
+          //     if (!c) return c
+
+          //     return {
+          //       ...c,
+          //       sort:
+          //         sorter && (sorter as SorterResult<IFormData>).field
+          //           ? {
+          //               [(sorter as SorterResult<IFormData>).field as string]:
+          //                 (sorter as SorterResult<IFormData>).order === 'ascend'
+          //                   ? MongoDbSortOrderEnum.Ascending
+          //                   : MongoDbSortOrderEnum.Descending,
+          //             }
+          //           : {},
+          //       pagination: cbPagination as IPagination,
+          //     }
+          //   })
+          // }}
         />
       )}
     </>
@@ -196,13 +194,12 @@ export default function FormDataListTableComponent({
 }
 
 type IFormDataListTableComponent = {
-  dataListConfig?: IFormDataListConfig & { configForFormId?: number }
-  detailsLayoutConfig?: IDndLayoutStructure_Responsive
-  dataList: { data: IFormData[]; total: number }
+  layoutsConfigs: IDataListLayoutConfig
+  dataList: { data: IFormDataListData[]; total: number }
   parentLoading: boolean
   loadingBlock?: JSX.Element
   setParentLoading: React.Dispatch<React.SetStateAction<boolean>>
-  updateDataList: (reqData: IReqDataConfig) => void
+  updateDataList: (reqData: IDataListReqData) => void
 } & ICustomFunctionCall &
   IDataListHeaderContext
 

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

@@ -4,63 +4,56 @@ import LayoutRendererCol from '../2-col'
 import { memo, ReactElement, ReactNode, useMemo, useState } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
-import {
-  IButtonElementProps,
-  IDndLayoutElement,
-  IFormLayoutElementConditions,
-  IDndLayoutRow,
-} from '../../../../types'
+import { IButtonElementProps, IDndLayoutElement, IFormLayoutElementConditions, IDndLayoutRow } from '../../../../types'
 
 export const LayoutRendererRow = memo(
   ({ basePath = [], rowData, titleComponent, formContext, elements, renderButton }: ILayoutRendererRow) => {
     const [hiddenElementCount, setHiddenElementCount] = useState(0)
 
     const styleConfig = useMemo(() => {
-      if (!rowData.style || !rowData.style) return {}
+      if (!rowData.style) return {}
       return kebabCaseToCamelCase(rowData.style)
     }, [rowData.style])
 
     return (
-      <>
-        <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
-          <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
-            {(formListItemProps) => {
-              const style: { [key: string]: any } = {
-                ...styleConfig,
-                ...getFlexContainerStyle(rowData.display),
-              }
-              if (hiddenElementCount === rowData.children.length) style.display = 'none'
+      <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
+        <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
+          {(formListItemProps) => {
+            const style: { [key: string]: any } = {
+              ...styleConfig,
+              ...getFlexContainerStyle(rowData.display),
+            }
+            if (hiddenElementCount === rowData.children.length) style.display = 'none'
 
-              return (
-                <div style={style}>
-                  {rowData.children.map((col, colIdx) => (
-                    <LayoutRendererCol
-                      key={colIdx}
-                      basePath={formListItemProps ? formListItemProps.updatedBasePath : basePath}
-                      colData={col}
-                      titleComponent={titleComponent}
-                      elements={elements}
-                      formContext={formContext}
-                      colStyle={getColumnStyle(colIdx, rowData.display)}
-                      renderButton={renderButton}
-                      hideRow={(isHidden) =>
-                        setHiddenElementCount((c) => {
-                          if (isHidden) return c + 1
-                          else {
-                            if (c - 1 < 0) return 0
-                            return c - 1
-                          }
-                        })
-                      }
-                    />
-                  ))}
-                  {formListItemProps?.removeButton}
-                </div>
-              )
-            }}
-          </LayoutRowRepeatableRenderer>
-        </LayoutRowConditionalHeaderRenderer>
-      </>
+            return (
+              <div style={{ ...style, maxWidth: '100vw', overflowX: 'auto' }}>
+                {rowData.children.map((col, colIdx) => (
+                  <LayoutRendererCol
+                    key={colIdx}
+                    basePath={formListItemProps ? formListItemProps.updatedBasePath : basePath}
+                    colData={col}
+                    titleComponent={titleComponent}
+                    elements={elements}
+                    formContext={formContext}
+                    colStyle={getColumnStyle(colIdx, rowData.display)}
+                    renderButton={renderButton}
+                    hideRow={(isHidden) =>
+                      setHiddenElementCount((c) => {
+                        if (isHidden) return c + 1
+                        else {
+                          if (c - 1 < 0) return 0
+                          return c - 1
+                        }
+                      })
+                    }
+                  />
+                ))}
+                {formListItemProps?.removeButton}
+              </div>
+            )
+          }}
+        </LayoutRowRepeatableRenderer>
+      </LayoutRowConditionalHeaderRenderer>
     )
   },
 )

package/src/constants.ts

@@ -110,4 +110,23 @@ export const DEFAULT_CONFIG = {
   siteIdentity: { logoUrl: '/favicon.png', iconUrl: '/favicon.png', title: 'Site Title' },
   siteMenus: [],
   siteLanguages: [{ value: 'en', label: 'English', defaultSelected: true }],
+  loginLayout: {
+    layout: 'center',
+    backgroundType: 'color',
+    background: '#f5f5f5',
+    backgroundImage: '',
+    formStyle: 'mini',
+    logoPosition: 'top',
+    form: {
+      title: 'Login',
+      color: '#245780',
+      background: '#ffffff',
+      size: 20,
+      width: 400,
+      weight: 700,
+      padding: 20,
+      spacing: 20,
+      fields: ['email', 'password', 'forgot-password']
+    }
+  }
 }

package/src/enums/companies/index.ts

@@ -2,5 +2,6 @@ export enum AppearanceMenu {
     siteIdentity = 'Site Identity',
     siteLayouts = 'Site Layouts',
     siteMenus = 'Site Menus',
-    siteLanguages = 'Site Languages'
-}
+    siteLanguages = 'Site Languages',
+    loginLayout = 'Login Layout'
+}

package/src/enums/index.ts

@@ -8,6 +8,7 @@ export enum ElementTypeEnum {
   NumberInput = 'NumberInput',
   CurrencyInput = 'CurrencyInput',
   Select = 'Select',
+  TreeSelect = 'TreeSelect',
   Radio = 'Radio',
   Checkbox = 'Checkbox',
   CheckboxGroup = 'CheckboxGroup',

package/src/functions/forms/index.ts

@@ -94,11 +94,11 @@ export const appendOptionsFromDetailsLayout = (
       [ElementTypeEnum.Select, ElementTypeEnum.Radio].includes(element.elementType) &&
       element &&
       (element as ISelectElement | IRadioElement).props?.optionSource?.type ===
-        FieldElementOptionSourceEnum.ReadFromDetails
+      FieldElementOptionSourceEnum.ReadFromDetails
     ) {
       const detailsElement =
         detailsLayoutElements[
-          ((element as ISelectElement | IRadioElement).props.optionSource as IOptionSourceReadFromDetails)?.field ?? ''
+        ((element as ISelectElement | IRadioElement).props.optionSource as IOptionSourceReadFromDetails)?.field ?? ''
         ]
       updatedElements[elementKey] = {
         ...element,
@@ -108,7 +108,7 @@ export const appendOptionsFromDetailsLayout = (
             type: FieldElementOptionSourceEnum.Static,
             options: detailsElement
               ? ((detailsElement as ISelectElement | IRadioElement).props.optionSource as IOptionSourceConstant)
-                  ?.options ?? []
+                ?.options ?? []
               : [],
           },
         },
@@ -139,7 +139,7 @@ export const getColumnStyle = (itemIdx: number, display?: IGridContainerConfig):
 /** ---------------------------------------------------------------------------------------------------------  */
 
 export const constructDynamicFormHref = (name: string) => '/d/' + name.split(' ').join('-').toLowerCase()
-
+export const constructDynamicReportHref = (name: string) => '/d/reports/' + name.split(' ').join('-').toLowerCase()
 /** ---------------------------------------------------------------------------------------------------------  */
 
 export const extractDynamicFormHref = (pathname: string = '') => {

package/src/types/companies/index.ts

@@ -1,6 +1,7 @@
 export interface ICompanyViewModel {
     id: number;
     name?: string | null;
+    domain?: string;
     blobSAS?: string | null;
     defaultDataId?: string | null;
     key?: string | null;
@@ -15,7 +16,29 @@ export interface ICompanyConfig {
     siteLayout: ISiteLayout;
     siteMenus: ISiteMenus;
     siteLanguages: ISiteLanguages;
+    loginLayout: ILoginLayout;
+}
+export interface ILoginLayout {
+    layout: string;
+    backgroundType: string;
+    background: string;
+    backgroundImage: string;
+    formStyle: string;
+    logoPosition: string;
+    form: ILoginFormLayout;
+}
+export interface ILoginFormLayout {
+    width: number;
+    padding: number;
+    title: string;
+    background: string;
+    size: number;
+    weight: number;
+    color: string;
+    spacing: number;
+    fields: string[];
 }
+
 export type ISiteLanguages = ISiteLanguageItem[]
 export interface ISiteLanguageItem {
     value: string;
@@ -25,26 +48,37 @@ export interface ISiteLanguageItem {
 export type ISiteMenus = ISiteMenuItem[]
 
 export interface ISiteMenuItem {
-    id: number
-    name: string
-    publicAccess?: boolean
-    icon?: string
-    customLink?: string
+    id: number;
+    name: string;
+    displayName?: string;
+    publicAccess?: boolean;
+    icon?: string;
+    customLink?: string;
     children?: ISiteMenuItem[]
 }
+export interface IProfileMenuItem {
+    id: number;
+    name: string;
+    displayName?: string;
+    customLink?: string;
+    icon?: string;
+    onClick?: () => void
+}
 export interface IExtendedSiteMenuItem extends ISiteMenuItem {
     isMenuGroup?: boolean;
     isReportGroup?: boolean;
+    menuType?: string;
 }
 export interface MenuBuilderProps {
-    reportItems: ISiteReportItem[]
-    menuItems: ISiteMenuItem[]
-    onChange?: (menu: ISiteMenuItem[]) => void
-    initialValue: ISiteMenuItem[]
+    reportItems: ISiteReportItem[];
+    menuItems: ISiteMenuItem[];
+    onChange?: (menu: ISiteMenuItem[]) => void;
+    initialValue: ISiteMenuItem[];
 }
 export interface ISiteReportItem {
     id: number;
     name: string;
+    displayName: string;
     description: string;
     isActive: boolean;
     order: number;
@@ -130,4 +164,5 @@ export interface FontSelectorProps {
     initialFont?: string;
 }
 
-export * from './site-layout/authenticated';
+export * from './site-layout/authenticated';
+export * from './site-layout/unauthenticated';

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

@@ -2,7 +2,7 @@ import { FaCaretDown, FaTimes, FaUser } from 'react-icons/fa'
 import { HiMenu } from 'react-icons/hi'
 import { ICompanyConfig, ILayoutTemplateProps, IExtendedSiteMenuItem } from '../..'
 import { Link } from 'react-router-dom'
-import { constructDynamicFormHref, isEncodedURI } from '../../../../functions/forms'
+import { constructDynamicFormHref, constructDynamicReportHref, isEncodedURI } from '../../../../functions/forms'
 import { useEffect, useState } from 'react'
 import { Button, Drawer, Dropdown, Layout, Menu } from 'antd'
 import * as FaIcons from 'react-icons/fa'
@@ -11,7 +11,7 @@ const { Header, Content, Sider } = Layout
 export const layoutTemplates = [
   {
     name: 'template_1',
-    value: ({ children, userName, menuItems, config, logoUrl, isPreview }: ILayoutTemplateProps) => {
+    value: ({ children, menuItems, config, logoUrl, isPreview }: ILayoutTemplateProps) => {
       const [sidebarOpen, setSidebarOpen] = useState(false)
       const siteConfigs = config?.siteLayout?.siteConfigs
       const navigationWidth = siteConfigs?.custom?.navigationWidth || 200
@@ -28,12 +28,17 @@ export const layoutTemplates = [
       }, [config])
 
       const renderMenuItem = (form: IExtendedSiteMenuItem, level = 0) => {
-        let href =
-          form.customLink === '' || form.isMenuGroup || form.isReportGroup
-            ? '#'
-            : form.customLink
-            ? form.customLink
-            : constructDynamicFormHref(form.name)
+        let href = ''
+
+        if (form.customLink === '' || form.isMenuGroup || form.isReportGroup) {
+          href = '#'
+        } else if (form.customLink) {
+          href = form.customLink
+        } else if (form.menuType && form.menuType === 'report') {
+          href = constructDynamicReportHref(form.name)
+        } else {
+          href = 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]
@@ -81,7 +86,7 @@ export const layoutTemplates = [
                   <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.displayName || form.name}</span>
               {isParentMenu &&
                 (isExpanded ? <FaIcons.FaAngleUp className="w-4 h-4" /> : <FaIcons.FaAngleDown className="w-4 h-4" />)}
             </Link>
@@ -108,7 +113,7 @@ export const layoutTemplates = [
       )
       return (
         <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">
+          <Header className="sticky top-0 z-40 flex items-center shadow-sm justify-between px-1 overflow-hidden">
             {/* Logo */}
             <div className="flex">
               <a href="/">
@@ -217,30 +222,33 @@ export const layoutTemplates = [
   },
   {
     name: 'template_2',
-    value: ({ children, userName, menuItems, config, logoUrl, isPreview }: ILayoutTemplateProps) => {
+    value: ({ children, menuItems, config, logoUrl, isPreview }: ILayoutTemplateProps) => {
       const [sidebarOpen, setSidebarOpen] = useState(false)
       const siteConfigs = config?.siteLayout?.siteConfigs
       const contentPadding = siteConfigs?.custom?.contentPadding || 20
-      const [expandedMenus, setExpandedMenus] = useState<{ [key: number]: boolean }>({})
+
       const renderMenuItem = (form: IExtendedSiteMenuItem, level = 0) => {
-        let href =
-          form.customLink === '' || form.isMenuGroup || form.isReportGroup
-            ? '#'
-            : form.customLink
-            ? form.customLink
-            : constructDynamicFormHref(form.name)
+        let href = ''
+
+        if (form.customLink === '' || form.isMenuGroup || form.isReportGroup) {
+          href = '#'
+        } else if (form.customLink) {
+          href = form.customLink
+        } else if (form.menuType && form.menuType === 'report') {
+          href = constructDynamicReportHref(form.name)
+        } else {
+          href = constructDynamicFormHref(form.name)
+        }
         let isParentMenu = href === '#' && form.children && form.children.length > 0
-        const isExpanded = expandedMenus[form.id]
+
         const IconComponent = form.icon ? (FaIcons as any)[form.icon] : null
-        const toggleMenu = (id: number) => {
-          setExpandedMenus((prev) => ({ ...prev, [id]: !prev[id] }))
-        }
+
         return (
           <div key={form.id} className="relative group">
             <Link
               to={href}
               target={form.customLink && '_blank'}
-              onClick={isParentMenu ? () => toggleMenu(form.id) : undefined}
+              onClick={isParentMenu ? (e) => e.preventDefault() : undefined}
               style={{
                 borderRadius: `${siteConfigs?.Link.borderRadius}px`,
                 backgroundColor: isActive(window.location.pathname, href)
@@ -274,7 +282,7 @@ export const layoutTemplates = [
                   <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.displayName || form.name}</span>
             </Link>
             {isParentMenu && (
               <div className="absolute left-0 top-full hidden group-hover:flex flex-col bg-white shadow-md rounded-md z-50 min-w-[180px]">
@@ -394,7 +402,7 @@ export const layoutTemplates = [
   },
   {
     name: 'template_3',
-    value: ({ children, userName, menuItems, logoUrl, config, isPreview }: ILayoutTemplateProps) => {
+    value: ({ children, menuItems, logoUrl, config, isPreview }: ILayoutTemplateProps) => {
       const [sidebarOpen, setSidebarOpen] = useState(false)
       const siteConfigs = config?.siteLayout?.siteConfigs
       const navigationWidth = siteConfigs?.custom?.navigationWidth || 200
@@ -411,12 +419,17 @@ export const layoutTemplates = [
         setExpandedMenus(initialExpandedStates)
       }, [config])
       const renderMenuItem = (form: IExtendedSiteMenuItem, level = 0) => {
-        let href =
-          form.customLink === '' || form.isMenuGroup || form.isReportGroup
-            ? '#'
-            : form.customLink
-            ? form.customLink
-            : constructDynamicFormHref(form.name)
+        let href = ''
+
+        if (form.customLink === '' || form.isMenuGroup || form.isReportGroup) {
+          href = '#'
+        } else if (form.customLink) {
+          href = form.customLink
+        } else if (form.menuType && form.menuType === 'report') {
+          href = constructDynamicReportHref(form.name)
+        } else {
+          href = 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]
@@ -464,7 +477,7 @@ export const layoutTemplates = [
                   <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.displayName || form.name}</span>
               {isParentMenu &&
                 (isExpanded ? <FaIcons.FaAngleUp className="w-4 h-4" /> : <FaIcons.FaAngleDown className="w-4 h-4" />)}
             </Link>

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

@@ -10,3 +10,28 @@ export const unauthorizedLayoutTemplates = [
     ),
   },
 ]
+export const layoutOptions = [
+  { label: 'Centered', value: 'center' },
+  { label: 'Image Left / Form Right', value: 'split-left' },
+  { label: 'Form Left / Image Right', value: 'split-right' },
+]
+export const logoOptions = [
+  { label: 'Top', value: 'top' },
+  { label: 'Bottom', value: 'bottom' },
+  { label: 'None', value: 'none' },
+]
+export const formStyleOptions = [
+  { label: 'Full', value: 'full' },
+  { label: 'Mini', value: 'mini' },
+]
+export const backgroundTypeOptions = [
+  { label: 'Color', value: 'color' },
+  { label: 'Image', value: 'image' },
+]
+
+export const formFieldOptions = [
+  { label: 'Username', value: 'username' },
+  { label: 'Email', value: 'email' },
+  { label: 'Password', value: 'password' },
+  { label: 'Forgot Password', value: 'forgot-password' },
+]

package/src/types/forms/index.ts

@@ -20,6 +20,7 @@ export interface IFormDataListConfig {
   listType: FormDataListViewTypeEnum
   columns: IFormDataListColumn[]
   header: IDndLayoutStructure_Responsive
+  joins?: IFormJoin[]
   pagination?: IFormDataListPagination
   title?: string
   showCount?: boolean
@@ -53,3 +54,6 @@ export interface IFormJoin {
   localField: string
   alias: string
 }
+export interface IFormDataListData {
+  [key: string]: any
+}