ui-soxo-bootstrap-core 2.4.25-dev.37 → 2.4.25-dev.41

package/core/lib/models/forms/components/form-creator/form-creator.js

@@ -1,9 +1,9 @@
 /**
- * 
+ *
  * @author Ashique Mohammed
  * @description Generic Form create accepts an array of fields to update any resource
  * @version
- * 
+ *
  */
 
 // let forms = [{
@@ -13,13 +13,13 @@
 //     tabs: [{}]
 // }]
 
-import React, { useState } from "react"
+import React, { useState } from 'react';
 
 import moment from 'moment';
 
-import Button from "../../../../../lib/elements/basic/button/button";
+import Button from '../../../../../lib/elements/basic/button/button';
 
-import {  Form, Input, Radio, InputNumber, DatePicker, TimePicker, Checkbox, Select, Row, Col, Tabs } from 'antd';
+import { Form, Input, Radio, InputNumber, DatePicker, TimePicker, Checkbox, Select, Row, Col, Tabs } from 'antd';
 
 // import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
@@ -29,9 +29,9 @@ import Camera from './../../../../components/camera/camera';
 
 // import { ColumnHeightOutlined } from '@ant-design/icons';
 
-import { DateUtils } from "../../../../utils";
+import { DateUtils } from '../../../../utils';
 
-import { FieldCustomizer, TabCustomizer } from "./../../../../";
+import { FieldCustomizer, TabCustomizer, ReferenceSelect } from './../../../../';
 
 import { prepareAndExecuteScript } from './../../../../utils/script.utils';
 
@@ -43,163 +43,148 @@ const { TabPane } = Tabs;
 
 // const grid = 4;
 
-
-import './form-creator.scss'
+import './form-creator.scss';
 
 /**
  * Component accepts fields to render the necessary components and returns the values on submission
- * 
- * @param {*} param0 
- * @returns 
+ *
+ * @param {*} param0
+ * @returns
  */
 function FormCreator({
-    /**If we want to change the existing information first we need the current information ie, selectedInformation*/
-    selectedInformation,
-    model,
-    formContent = {},
-    onSubmit,
-    fields = [],
-    callback,
-    layout,
-    // Below are arguments for use in form display
-    onFieldUpdate,
-    // onListUpdate,
-    onFieldRemove,
+  /**If we want to change the existing information first we need the current information ie, selectedInformation*/
+  selectedInformation,
+  model,
+  formContent = {},
+  onSubmit,
+  fields = [],
+  callback,
+  layout,
+  // Below are arguments for use in form display
+  onFieldUpdate,
+  // onListUpdate,
+  onFieldRemove,
 }) {
-    const [form] = Form.useForm();
-
-    let layoutValue;
-
-    if (layout) {
-        layoutValue = layout
-    } else {
-        layoutValue = {
-            labelCol: { span: 12 },
-            wrapperCol: { span: 12 },
-        };
-    }
-
-    // Variable used for loading state
-    const [loading, setLoading] = useState(false);
-
-    // Variable stores the form body values
-    const [content, setContent] = useState(() => {
-
-        // Body for the files
-        let body = formContent || { [model.name]: {} };
-
-        fields.forEach((entry) => {
-
-            if (entry.transform) {
-
-                body[entry.field] = entry.transform(body[entry.field]);
-            }
-
-            // If its a date
-            if (['date'].indexOf(entry.type) !== -1 && formContent[entry.field]) {
-
-                body[entry.field] = DateUtils.getMomentObject(formContent[entry.field]);
-            }
-
-        })
-
-        return body;
-
+  const [form] = Form.useForm();
+
+  let layoutValue;
+
+  if (layout) {
+    layoutValue = layout;
+  } else {
+    layoutValue = {
+      labelCol: { span: 12 },
+      wrapperCol: { span: 12 },
+    };
+  }
+
+  // Variable used for loading state
+  const [loading, setLoading] = useState(false);
+
+  // Variable stores the form body values
+  const [content, setContent] = useState(() => {
+    // Body for the files
+    let body = formContent || { [model.name]: {} };
+
+    fields.forEach((entry) => {
+      if (entry.transform) {
+        body[entry.field] = entry.transform(body[entry.field]);
+      }
+
+      // If its a date
+      if (['date'].indexOf(entry.type) !== -1 && formContent[entry.field]) {
+        body[entry.field] = DateUtils.getMomentObject(formContent[entry.field]);
+      }
     });
 
-    /**
-     * Function handles trigger of onupload
-     * 
-     * @param {*} element 
-     * @param {*} attachments 
-     */
-    function onUpload(element, attachments) {
-        form.setFieldsValue({ [element.field]: attachments });
-    }
-
-    /**
-     * Custom Listener for onchange of input 
-     * 
-     * @param {*} element 
-     * @param {*} attachments 
-     */
-    function onChange(element, value) {
-
-        // Though we initially gave less respect to this method
-        // This is the game changer - 29/01/23
-
-        // Being able to listen to script , Bind onChange listeners to each input 
-        // can avoid the need for building custom forms again 
-
-        // console.log(element);
-
-        /** */
-        if (element.field) {
-
-            form.setFieldsValue({ [element.field]: value });
-        }
-    }
-
-    // const onDragEnd = (result) => {
-
-    //     onListUpdate(result.source, result.destination);
-    // }
-
-    // const getListStyle = (isDraggingOver) => ({
-    //     // background: isDraggingOver ? 'lightblue' : '',
-    //     boxShadow: isDraggingOver ? '0px 0px 5px 5px #eeeeee' : '',
-
-    //     // padding: grid,
-    //     // width: 250
-    // });
-
-    /**
-     * Function triggered for any onChange of input
-     * 
-     * @param {*} formFields 
-     */
-    const onFieldsChange = (formFields) => {
-
-        formFields.forEach((field) => {
-            if (field.name[0].includes('date')) {
-
-                // values[field.field] = new Timestamp(moment(field.value).valueOf());
-
-                // content[field.name[0]] = moment(field.value).format('DD/MM/YYYY');
-            } else {
-                // content[field.name[0]] = field.value;
-            }
-        })
-        // setContent({ ...content })
+    return body;
+  });
+
+  /**
+   * Function handles trigger of onupload
+   *
+   * @param {*} element
+   * @param {*} attachments
+   */
+  function onUpload(element, attachments) {
+    form.setFieldsValue({ [element.field]: attachments });
+  }
+
+  /**
+   * Custom Listener for onchange of input
+   *
+   * @param {*} element
+   * @param {*} attachments
+   */
+  function onChange(element, value) {
+    // Though we initially gave less respect to this method
+    // This is the game changer - 29/01/23
+
+    // Being able to listen to script , Bind onChange listeners to each input
+    // can avoid the need for building custom forms again
+
+    // console.log(element);
+
+    /** */
+    if (element.field) {
+      form.setFieldsValue({ [element.field]: value });
     }
-
-    /**
-     * Values Change
-     * 
-     * @param {*} field 
-     * @param {*} values 
-     */
-    const onValuesChange = async (field, values) => {
-
-        // Find the input that is changed
-        let key = Object.keys(field)[0];
-
-        // Configuration
-        let fieldConfiguration = fields.filter((config) => config.field === key)[0];
-
-        // We have to check if there is an onChange script for the field
-        if (fieldConfiguration.on_change) {
-
-            // Before Submit of form , execute the script
-            values = await prepareAndExecuteScript(values, null, fieldConfiguration.on_change);
-
-        }
+  }
+
+  // const onDragEnd = (result) => {
+
+  //     onListUpdate(result.source, result.destination);
+  // }
+
+  // const getListStyle = (isDraggingOver) => ({
+  //     // background: isDraggingOver ? 'lightblue' : '',
+  //     boxShadow: isDraggingOver ? '0px 0px 5px 5px #eeeeee' : '',
+
+  //     // padding: grid,
+  //     // width: 250
+  // });
+
+  /**
+   * Function triggered for any onChange of input
+   *
+   * @param {*} formFields
+   */
+  const onFieldsChange = (formFields) => {
+    formFields.forEach((field) => {
+      if (field.name[0].includes('date')) {
+        // values[field.field] = new Timestamp(moment(field.value).valueOf());
+        // content[field.name[0]] = moment(field.value).format('DD/MM/YYYY');
+      } else {
+        // content[field.name[0]] = field.value;
+      }
+    });
+    // setContent({ ...content })
+  };
+
+  /**
+   * Values Change
+   *
+   * @param {*} field
+   * @param {*} values
+   */
+  const onValuesChange = async (field, values) => {
+    // Find the input that is changed
+    let key = Object.keys(field)[0];
+
+    // Configuration
+    let fieldConfiguration = fields.filter((config) => config.field === key)[0];
+
+    // We have to check if there is an onChange script for the field
+    if (fieldConfiguration.on_change) {
+      // Before Submit of form , execute the script
+      values = await prepareAndExecuteScript(values, null, fieldConfiguration.on_change);
     }
+  };
 
-    return (
-        <section className="form-creator">
-            <div>
-                {/* <DragDropContext onDragEnd={onDragEnd}>
+  return (
+    <section className="form-creator">
+      <div>
+        {/* <DragDropContext onDragEnd={onDragEnd}>
                 <Droppable droppableId="droppable">
 
                     {(provided, snapshot) => (
@@ -209,362 +194,344 @@ function FormCreator({
                             {...provided.droppableProps}
                         > */}
 
-                <Form
-                
-                    form={form}
-                    // layout="inline"
-                    {...layoutValue}
-                    className="new-record"
-                    name="new-record"
-                    onFinish={(values) => {
-
-                        setLoading(true);
-
-                        // Do a screening to check if date fields are 
-                        fields.forEach((field) => {
-
-                            if (field.field && field.field.includes('date')) {
-
-                                // values[field.field] = new Timestamp(new Date());
-
-                                values[field.field] = moment(values[field.field]).valueOf();
-
-                            } else {
-
-                            }
-
-                            if (field.type === ('time')) {
-
-                                // values[field.field] = new Timestamp(new Date());
-
-                                values[field.field] = moment(values[field.field]).format('HH:mm A');
-
-                            } else {
-
-                            }
-                        })
-
-                        onSubmit(values).then(() => {
-
-                            setLoading(false);
-
-                        });
-
-                    }}
-                    onFieldsChange={onFieldsChange}
-
-                    onValuesChange={onValuesChange}
-                    layout={layoutValue}
-                    // validateMessages={validateMessages} 
-                    initialValues={{
-                        ...content,
-                        remarks: ''
-                    }}
-                >
-
-                    {/* Mapper maps each fields to build the form */}
-                    <FieldMapper
-                        fields={fields}
-                        onChange={onChange}
-                        selectedInformation={selectedInformation}
-                        onUpload={onUpload}
-                        onFieldUpdate={onFieldUpdate}
-                        onFieldRemove={onFieldRemove}
-                    />
-
-                    {/* Mapper Ends */}
-
-                    <Button loading={loading} type="primary" htmlType="submit" className="submit-button">
-                        SUBMIT
-                    </Button>
-                </Form>
-            </div>
-            {/* </div>)}
+        <Form
+          form={form}
+          // layout="inline"
+          {...layoutValue}
+          className="new-record"
+          name="new-record"
+          onFinish={(values) => {
+            setLoading(true);
+
+            // Do a screening to check if date fields are
+            fields.forEach((field) => {
+              if (field.field && field.field.includes('date')) {
+                // values[field.field] = new Timestamp(new Date());
+
+                values[field.field] = moment(values[field.field]).valueOf();
+              } else {
+              }
+
+              if (field.type === 'time') {
+                // values[field.field] = new Timestamp(new Date());
+
+                values[field.field] = moment(values[field.field]).format('HH:mm A');
+              } else {
+              }
+            });
+
+            onSubmit(values).then(() => {
+              setLoading(false);
+            });
+          }}
+          onFieldsChange={onFieldsChange}
+          onValuesChange={onValuesChange}
+          layout={layoutValue}
+          // validateMessages={validateMessages}
+          initialValues={{
+            ...content,
+            remarks: '',
+          }}
+        >
+          {/* Mapper maps each fields to build the form */}
+          <FieldMapper
+            fields={fields}
+            onChange={onChange}
+            selectedInformation={selectedInformation}
+            onUpload={onUpload}
+            onFieldUpdate={onFieldUpdate}
+            onFieldRemove={onFieldRemove}
+            formContent={formContent}
+          />
+
+          {/* Mapper Ends */}
+
+          <Button loading={loading} type="primary" htmlType="submit" className="submit-button">
+            SUBMIT
+          </Button>
+        </Form>
+      </div>
+      {/* </div>)}
 
                 </Droppable>
             </DragDropContext> */}
-
-        </section>
-    );
+    </section>
+  );
 }
 
 export default FormCreator;
 
-
 /**
  * Field Mapper accepts fields to build the form
- * 
- * @param {*} param0 
- * @returns 
+ *
+ * @param {*} param0
+ * @returns
  */
-function FieldMapper({
-    fields = [],
-    onChange,
-    selectedInformation,
-    onUpload,
-    onFieldUpdate,
-    onFieldRemove
-}) {
+function FieldMapper({ fields = [], onChange, selectedInformation, onUpload, onFieldUpdate, onFieldRemove, formContent }) {
+  return (
+    <>
+      {fields.map((field, index) => {
+        // For Tabs
+        if (field.type === 'Tabs') {
+          return (
+            <Tabs defaultActiveKey="0">
+              {field.tabs.map((tab, tabIndex) => {
+                return (
+                  <TabPane tab={`${tab.caption}`} key={tabIndex}>
+                    {/* Customizes the Tab */}
+                    <TabCustomizer
+                      tab={tab}
+                      field={field}
+                      onFieldUpdate={onFieldUpdate}
+                      fieldIndex={tabIndex}
+                      index={index}
+                      onFieldRemove={onFieldRemove}
+                    />
+                    {/* Customizes the Tab Ends */}
 
-    return (<>
-
-        {
-            fields.map((field, index) => {
-
-                // For Tabs
-                if (field.type === 'Tabs') {
-
-                    return (<Tabs defaultActiveKey="0">
-
-                        {
-                            field.tabs.map((tab, tabIndex) => {
-
-                                return (
-                                    <TabPane tab={`${tab.caption}`} key={tabIndex} >
-
-                                        {/* Customizes the Tab */}
-                                        <TabCustomizer
-
-                                            tab={tab}
-                                            field={field}
-
-                                            onFieldUpdate={onFieldUpdate}
-                                            fieldIndex={tabIndex}
-                                            index={index}
-                                            onFieldRemove={onFieldRemove} />
-                                        {/* Customizes the Tab Ends */}
-
-                                        {/* Mapper maps each fields to build the form */}
-                                        <FieldMapper
-                                            fields={tab.fields}
-                                            onChange={onChange}
-                                            onUpload={onUpload}
-                                            onFieldUpdate={onFieldUpdate}
-                                            onFieldRemove={onFieldRemove}
-                                        />
-
-                                    </TabPane>
-                                )
-                            })
-                        }
-
-                    </Tabs>)
-
-                } else {
-
-                    if (field.condition) {
-
-                        return field.condition(content)
-                            ?
-                            <UserInput
-                                onChange={onChange}
-                                index={index}
-                                key={index}
-                                onUpload={onUpload}
-                                field={field}
-                                onFieldUpdate={onFieldUpdate}
-                                onFieldRemove={onFieldRemove}
-                            />
-                            :
-                            null
-
-                    } else {
-                        return <UserInput
-                            onChange={onChange}
-                            key={index}
-                            selectedInformation={selectedInformation}
-                            index={index}
-                            field={field}
-                            onUpload={onUpload}
-                            onFieldUpdate={onFieldUpdate}
-
-                            onFieldRemove={onFieldRemove}
-
-                        />;
-                    }
-                }
-            })
+                    {/* Mapper maps each fields to build the form */}
+                    <FieldMapper
+                      fields={tab.fields}
+                      onChange={onChange}
+                      onUpload={onUpload}
+                      onFieldUpdate={onFieldUpdate}
+                      onFieldRemove={onFieldRemove}
+                    />
+                  </TabPane>
+                );
+              })}
+            </Tabs>
+          );
+        } else {
+          if (field.condition) {
+            return field.condition(content) ? (
+              <UserInput
+                onChange={onChange}
+                index={index}
+                key={index}
+                onUpload={onUpload}
+                field={field}
+                onFieldUpdate={onFieldUpdate}
+                onFieldRemove={onFieldRemove}
+                formContent={formContent}
+              />
+            ) : null;
+          } else {
+            return (
+              <UserInput
+                onChange={onChange}
+                key={index}
+                selectedInformation={selectedInformation}
+                index={index}
+                field={field}
+                onUpload={onUpload}
+                onFieldUpdate={onFieldUpdate}
+                onFieldRemove={onFieldRemove}
+                formContent={formContent}
+              />
+            );
+          }
         }
-
-    </>)
-
+      })}
+    </>
+  );
 }
 
-
-
 /**
  * Component accepts user input according to type
- * 
- * @param {*} param0 
+ *
+ * @param {*} param0
  */
-function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpdate, onFieldRemove, index }) {
-
-    let props = {};
-
-    // The extra text
-    if (field.extra) {
-        props.extra = field.extra;
+function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpdate, onFieldRemove, index, formContent }) {
+  let props = {};
+
+  // The extra text
+  if (field.extra) {
+    props.extra = field.extra;
+  }
+
+  const isVisible = field.visible !== undefined ? field.visible : true;
+
+  /**
+   * According to the type render each element
+   *
+   * @param {*} field
+   */
+  const inputElement = (field, onChange) => {
+    if (field.visible) {
+      if (field.visible === false) return null;
     }
 
-    const isVisible = field.visible !== undefined ? field.visible : true;
+    switch (field.type) {
+      case 'number':
+        return <InputNumber required={field.required} />;
+
+      case 'input':
+        return <Input required={field.required} />;
+
+      case 'radio':
+        return (
+          <Radio.Group>
+            {field.options.map((option, key) => (
+              <Radio key={key} value={option}>
+                {option ? 'Yes' : 'No'}
+              </Radio>
+            ))}
+          </Radio.Group>
+        );
+
+      case 'checkbox':
+        return (
+          <Checkbox.Group style={{ width: '100%' }}>
+            <Col>
+              {field.options.map((option, key) => {
+                let opt = typeof option === 'string' ? option : option.value;
 
-    /**
-    * According to the type render each element
-    * 
-    * @param {*} field 
-    */
-    const inputElement = (field, onChange) => {
-
-        if (field.visible) {
-
-            if (field.visible === false) return null;
-
-        }
-
-        switch (field.type) {
-
-            case 'number':
-                return <InputNumber required={field.required} />
-
-            case 'input':
-                return <Input required={field.required} />
-
-            case 'radio':
                 return (
-                    <Radio.Group>
-
-                        {field.options.map((option, key) => <Radio key={key} value={option}>{option ? 'Yes' : 'No'}</Radio>)}
-                        
-                    </Radio.Group>
-
+                  <Row>
+                    <Checkbox key={key} value={opt}>
+                      {opt}
+                    </Checkbox>
+                  </Row>
                 );
-
-            case 'checkbox':
-                return <Checkbox.Group style={{ width: '100%' }}>
-                    <Col>
-                        {
-                            field.options.map((option, key) => {
-
-                                let opt = typeof option === 'string' ? option : option.value;
-
-                                return <Row><Checkbox key={key} value={opt}>{opt}</Checkbox></Row>
-                            })
-                        }
-                    </Col>
-                </Checkbox.Group>
-
-            // case 'checkbox':
-            //     return <Checkbox.Group options={field.options}/>
-            case 'textarea':
-                return <TextArea rows={4} required={field.required} />
-
-            case 'boolean':
-                return <Select style={{ width: 120 }} required={field.required}>
-                    {[true, false].map((option, key) => <Option key={key} value={option}>{option ? 'Yes' : 'No'}</Option>)}
-                </Select>
-
-            case 'select':
-                // Handle static select options
-                if (Array.isArray(field.options)) {
-
-                    let defaultValue = field.default ? field.default : '';
-
-                    /**If there is selected Information ie, for change info if there is selected guest information
-                     * then we will match and set a default value from the guest details
-                     */
-                    if (selectedInformation) {
-                        // Get the field value dynamically from selectedInformation[0] using field.field
-                        const fieldValue = selectedInformation[0] && selectedInformation[0][field.caption];
-
-                        // Find the default value based on field value and matching DisplayMember or description
-                        const defaultOption = field.options.find(
-                            (option) =>
-                                option.displayMember?.toLowerCase() === fieldValue?.toLowerCase()
-                        )
-
-                        // If a matching option is found, set the default value; otherwise, do not set a default value (i.e., null or undefined)
-                        defaultValue = defaultOption ? defaultOption.valueMember : null;
-
-                    }
-                    /**In case of default selection we need to call the onchange manually */
-                    if (defaultValue) {
-
-                        onChange(field, defaultValue);
-                    }
-
-                    return (
-                        <Select defaultValue={defaultValue}
-                            required={field.required}
-                            style={{ width: 120 }}
-                            onChange={(value) => onChange(field, value)}
-                        >
-                            {field.options.map((option, key) => (
-                                <Option key={key} value={option.valueMember}>
-                                    {option.displayMember}
-                                </Option>
-                            ))}
-                        </Select>
-                    );
-                }
-            // case 'checkbox':
-            //     return <Checkbox.Group options={field.options} />
-
-            case 'datetime':
-                return <DatePicker format={"DD/MM/YYYY"} onChange={(record) => {
-
-                    onChange(field, record.format('DD/MM/YYYY'))
-
-                }} />
-
-            case 'date':
-                return <DatePicker format={"DD/MM/YYYY"} />
-
-
-            case 'time':
-                return <TimePicker format={"HH:mm A"} />
-
-            // onChange={(record) => {
-
-            //     console.log(record);
-
-            //     onChange(field, record.format('HH:mm A'))
-
-            // }}
-
-
-            case 'upload':
-                return <FileUpload multiple={field.multiple} maxSize={field.maxSize || 3} callback={(attachment) => onUpload(field, attachment)} onProgress={() => { }} />
-
-            case 'camera':
-                return <Camera />
-
-
-            default:
-                return <Input />
+              })}
+            </Col>
+          </Checkbox.Group>
+        );
+
+      // case 'checkbox':
+      //     return <Checkbox.Group options={field.options}/>
+      case 'textarea':
+        return <TextArea rows={4} required={field.required} />;
+
+      case 'boolean':
+        return (
+          <Select style={{ width: 120 }} required={field.required}>
+            {[true, false].map((option, key) => (
+              <Option key={key} value={option}>
+                {option ? 'Yes' : 'No'}
+              </Option>
+            ))}
+          </Select>
+        );
+
+      case 'select':
+        // Handle static select options
+        if (Array.isArray(field.options)) {
+          let defaultValue = field.default ? field.default : '';
+
+          /**If there is selected Information ie, for change info if there is selected guest information
+           * then we will match and set a default value from the guest details
+           */
+          if (selectedInformation) {
+            // Get the field value dynamically from selectedInformation[0] using field.field
+            const fieldValue = selectedInformation[0] && selectedInformation[0][field.caption];
+
+            // Find the default value based on field value and matching DisplayMember or description
+            const defaultOption = field.options.find((option) => option.displayMember?.toLowerCase() === fieldValue?.toLowerCase());
+
+            // If a matching option is found, set the default value; otherwise, do not set a default value (i.e., null or undefined)
+            defaultValue = defaultOption ? defaultOption.valueMember : null;
+          }
+          /**In case of default selection we need to call the onchange manually */
+          if (defaultValue) {
+            onChange(field, defaultValue);
+          }
+
+          return (
+            <Select defaultValue={defaultValue} required={field.required} style={{ width: 120 }} onChange={(value) => onChange(field, value)}>
+              {field.options.map((option, key) => (
+                <Option key={key} value={option.valueMember}>
+                  {option.displayMember}
+                </Option>
+              ))}
+            </Select>
+          );
         }
+      // case 'checkbox':
+      //     return <Checkbox.Group options={field.options} />
+      case 'reference-select':
+        // If a default value is provided in the field configuration
+        if (field.default) {
+          onChange(field, field.default);
+        }
+        // Render the ReferenceSelect component
+
+        return (
+          <ReferenceSelect
+            style={{ width: 120 }}
+            field={field.code}
+            model={formContent[field.modelName]}
+            {...field}
+            onChange={(value) => onChange(field, value)}
+            defaultValue={field.default}
+            allowClear={true}
+            // defaultValue={'1'}
+          />
+        );
+
+      case 'datetime':
+        return (
+          <DatePicker
+            format={'DD/MM/YYYY'}
+            onChange={(record) => {
+              onChange(field, record.format('DD/MM/YYYY'));
+            }}
+          />
+        );
+
+      case 'date':
+        return <DatePicker format={'DD/MM/YYYY'} />;
+
+      case 'time':
+        return <TimePicker format={'HH:mm A'} />;
+
+      // onChange={(record) => {
+
+      //     console.log(record);
+
+      //     onChange(field, record.format('HH:mm A'))
+
+      // }}
+
+      case 'upload':
+        return (
+          <FileUpload
+            multiple={field.multiple}
+            maxSize={field.maxSize || 3}
+            callback={(attachment) => onUpload(field, attachment)}
+            onProgress={() => {}}
+          />
+        );
+
+      case 'camera':
+        return <Camera />;
+
+      default:
+        return <Input />;
     }
+  };
 
-    // const getItemStyle = (draggableStyle, isDragging) => ({
-    //     // some basic styles to make the items look a bit nicer
-    //     userSelect: 'none',
-    //     // padding: grid,
-    //     // margin: `0 0 ${grid}px 0`,
-    //     // position: `absolute`,
-    //     // right: '40px',
-
-    //     // change background colour if dragging
-    //     // background: isDragging ? 'lightgreen' : 'whitesmoke',
+  // const getItemStyle = (draggableStyle, isDragging) => ({
+  //     // some basic styles to make the items look a bit nicer
+  //     userSelect: 'none',
+  //     // padding: grid,
+  //     // margin: `0 0 ${grid}px 0`,
+  //     // position: `absolute`,
+  //     // right: '40px',
 
-    //     boxShadow: isDragging ? '0px 0px 5px 5px #eeeeee' : '',
+  //     // change background colour if dragging
+  //     // background: isDragging ? 'lightgreen' : 'whitesmoke',
 
-    //     // styles we need to apply on draggables
-    //     ...draggableStyle
-    // });
+  //     boxShadow: isDragging ? '0px 0px 5px 5px #eeeeee' : '',
 
+  //     // styles we need to apply on draggables
+  //     ...draggableStyle
+  // });
 
-    return (
-        <>
-            {/* <Draggable
+  return (
+    <>
+      {/* <Draggable
                 key={`${field.caption}-${index}`}
                 draggableId={`${field.caption}-${index}`}
                 index={index}
@@ -582,10 +549,9 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
                             )}
 
                         > */}
-            {isVisible === true ? (
-                <div className="form-item-element">
-
-                    {/* <Button
+      {isVisible === true ? (
+        <div className="form-item-element">
+          {/* <Button
                                 size="small"
                                 ref={provided.innerRef}
                                 {...provided.dragHandleProps}
@@ -600,25 +566,25 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
 
                             </Button> */}
 
-
-                    {/* Customizes the form */}
-                    <FieldCustomizer field={field} onFieldUpdate={onFieldUpdate} index={index} onFieldRemove={onFieldRemove} />
-                    {/* Customizes the form Ends */}
-
-                    <Form.Item {...props} name={field.field} label={field.caption} rules={[{ required: field.required, message: field.placeholder || 'Please enter ' + field.caption }]}>
-
-                        {inputElement(field, onChange)}
-                        {/* <InputElement field={field} /> */}
-
-                    </Form.Item>
-
-                </div>
-            ) : null}
-            {/* </div>
+          {/* Customizes the form */}
+          <FieldCustomizer field={field} onFieldUpdate={onFieldUpdate} index={index} onFieldRemove={onFieldRemove} />
+          {/* Customizes the form Ends */}
+
+          <Form.Item
+            {...props}
+            name={field.field}
+            label={field.caption}
+            rules={[{ required: field.required, message: field.placeholder || 'Please enter ' + field.caption }]}
+          >
+            {inputElement(field, onChange)}
+            {/* <InputElement field={field} /> */}
+          </Form.Item>
+        </div>
+      ) : null}
+      {/* </div>
                     </div>
                 )}
             </Draggable> */}
-
-        </>
-    )
+    </>
+  );
 }

package/core/models/users/components/user-add/user-add.js

@@ -423,13 +423,15 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
 
       // add new model
       UsersAPI.create(values).then((result) => {
-        // callback();
-        if (result.success) message.success(result.message);
-        else message.error(result.message);
-
         setLoading(false);
 
-        callback();
+        if (result.success) {
+          message.success(result.message);
+          // close modal
+          callback();
+        } else {
+          message.error(result.message);
+        }
       });
     }
   };
@@ -605,8 +607,26 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
 
             <Col span={8}>
               {/* Mobile */}
-              <Form.Item name="mobile" label="Mobile" rules={[{ required: true, message: 'Please enter your mobile number' }]}>
-                <Input placeholder="Enter Mobile" maxLength={10} />
+              <Form.Item
+                name="mobile"
+                label="Mobile"
+                rules={[
+                  { required: true, message: 'Please enter your mobile number' },
+                  {
+                    pattern: /^[0-9]{10}$/,
+                    message: 'Mobile number must be exactly 10 digits',
+                  },
+                ]}
+              >
+                <Input
+                  placeholder="Enter Mobile"
+                  maxLength={10}
+                  onKeyPress={(e) => {
+                    if (!/[0-9]/.test(e.key)) {
+                      e.preventDefault();
+                    }
+                  }}
+                />
               </Form.Item>
             </Col>
             <Col span={8}>
@@ -651,7 +671,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
               <Form.Item label="Default Branch" name="defaultBranch" rules={[{ required: true, message: 'Please select default branch' }]}>
                 <Select placeholder="Select Default Branch" onChange={setDefaultBranch}>
                   {branchOptions
-                    .filter((opt) => selectedBranches.includes(Number(opt.value))) 
+                    .filter((opt) => selectedBranches.includes(Number(opt.value)))
                     .map((opt) => (
                       <Option key={opt.value} value={Number(opt.value)}>
                         {opt.label}

package/core/models/users/components/user-list/user-list.js

@@ -365,7 +365,7 @@ const UserList = ({ model, match, relativeAdd = false, additional_queries = [],
             )}
 
             {/* Add Modal */}
-            <Modal destroyOnClose confirmLoading={loading} visible={visible} onCancel={closeModal} footer={null}>
+            <Modal destroyOnClose={false} confirmLoading={loading} visible={visible} onCancel={closeModal} footer={null}>
                 <model.ModalAddComponent
                     match={match}
                     model={model}

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js

@@ -220,7 +220,7 @@ export default function ReportingDashboard({
       if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
         // let model = "";
         let model = CustomModels[record.modelName];
-
+        formContent[record.modelName] = model;
         return {
           ...record,
           model,
@@ -261,7 +261,7 @@ export default function ReportingDashboard({
     getPatientDetails();
   }
 
-  const fetchReportData = async (id, values, dbPtr, pagination) => {
+  const fetchReportData = async (id, values, dbPtr, pagination, paramsString) => {
     const { current, pageSize } = pagination || {};
     // If card script id is exist load that id otherwise load id
     const coreScriptId = scriptId.current ? scriptId.current : id;
@@ -270,10 +270,23 @@ export default function ReportingDashboard({
     try {
       // Prepare payload for backend: format only here
       const formattedValues = {};
-      Object.keys(values).forEach((key) => {
-        const val = values[key];
-        formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
+      let inputParams = [];
+      inputParams = JSON.parse(paramsString);
+      // Iterate through all keys in the values object
+
+      inputParams.forEach(({ field }) => {
+        const val = values[field];
+
+        // field exists in values → format & assign
+        if (val !== undefined) {
+          formattedValues[field] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
+        }
+        // field missing in values → set null
+        else {
+          formattedValues[field] = null;
+        }
       });
+      // });
       // Pagination Data
       const paginationData = {
         page: pagination.current || 1,
@@ -290,6 +303,7 @@ export default function ReportingDashboard({
       if (scope) {
         formBody = { body: { ...scope, ...paginationData } };
       }
+
       // Fetch result
       const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
       // Handle both result formats
@@ -410,7 +424,7 @@ export default function ReportingDashboard({
         Object.entries(urlsToUpdate).filter(([_, value]) => value !== undefined && value !== null && value !== '')
       );
 
-      setformContents(formContent);
+      setformContents((prev) => ({ ...prev, ...formContent }));
       Location.search({ ...Location.search(), ...filteredParams });
     }
 
@@ -423,7 +437,7 @@ export default function ReportingDashboard({
 
     // Call API
     try {
-      await fetchReportData(id, values, dbPtr, paginationData);
+      await fetchReportData(id, values, dbPtr, paginationData, paramsString);
     } finally {
       setLoading(false);
       setCardLoading(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.25-dev.37",
+  "version": "2.4.25-dev.41",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"