ui-soxo-bootstrap-core 2.6.21 → 2.6.22

package/core/components/landing-api/landing-api.js

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 
 import { Route, Switch } from 'react-router-dom';
 
 import { Skeleton } from 'antd';
 
-import { GlobalHeader, ChangePassword, useTranslation, GlobalContext, ModuleRoutes, SpotlightSearch, SettingsUtil, Profile, Card } from '../../lib';
+import { Card, ChangePassword, GlobalContext, GlobalHeader, ModuleRoutes, Profile, SettingsUtil, SpotlightSearch, useTranslation } from '../../lib';
 
 import './landing-api.scss';
 
@@ -16,7 +16,7 @@ import ReportingDashboard from '../../modules/reporting/components/reporting-das
 
 import PropTypes from 'prop-types';
 
-import { MenusAPI, CoreScripts } from '../../models';
+import { CoreScripts, MenusAPI } from '../../models';
 
 const motivatingMessages = [
   'Setting things up for a great start...',
@@ -159,7 +159,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
    * @param reports
    */
   async function loadMenus(reports) {
-
     setLoader(true);
 
     // setReports(report)
@@ -169,16 +168,12 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
     // console.log(result);
 
     if (result && Array.isArray(result.result) && result.result.length) {
-
       // setModules(result.result);
-
       // result.result.map((ele) => {
       //     let languageString = JSON.parse(ele.attributes)
       //     console.log('language_string', languageString);
       //     if (languageString && languageString.languages) {
-
       //         const language = i18n.language;
-
       //         i18n.addResourceBundle(language, 'translation', languageString.languages[i18n.language]);
       //     }
       // })
@@ -189,7 +184,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
       dispatch({ type: 'settings', payload: result.result.settings });
     }
 
-
     // Reports length
     if (reports.length) {
       reportMenus = [
@@ -224,7 +218,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
         //If there is no roles assigned to the user
         setAllModules([...coreModules]);
       }
-
     } else {
       //  for nura
       if (result && result.result.menus && reportMenus) {
@@ -233,14 +226,10 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
         //If there is no roles assigned to the user
         setAllModules([...coreModules]);
       }
-
-
     }
     setLoader(false);
-
   }
 
-
   /**
    * Load the scripts
    *
@@ -505,16 +494,18 @@ function DefineRoute({ menus, CustomComponents, CustomModels, settings, callback
   function printRoute(menu, index, CustomComponents, CustomModels, callback) {
     // From the path we remove any query parameters that exist in the url
     //
-    let paths;
+    let paths = [];
 
     //There will be path for normal menus
-    if (menu.path) {
+    if (menu?.path) {
       paths = menu.path.split('?');
-    } else {
-      /** In case if there is no path , ie, in case of reports menu */
-      menu.sub_menus.map((menus) => {
-        paths = menus.path.split('?');
-      });
+    } else if (Array.isArray(menu?.sub_menus)) {
+      for (const subMenu of menu.sub_menus) {
+        if (subMenu?.path) {
+          paths = subMenu.path.split('?');
+          break;
+        }
+      }
     }
 
     // Find the route path

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

@@ -35,6 +35,8 @@ import { FieldCustomizer, TabCustomizer } from "./../../../../";
 
 import { prepareAndExecuteScript } from './../../../../utils/script.utils';
 
+import AdvancedSearchSelect from "../../../../../modules/reporting/components/reporting-dashboard/adavance-search/advance-search";
+
 const { TextArea } = Input;
 
 const { Option } = Select;
@@ -59,8 +61,10 @@ function FormCreator({
     formContent = {},
     onSubmit,
     fields = [],
+    reportId,
     callback,
     layout,
+    onFormValuesChange,
     // Below are arguments for use in form display
     onFieldUpdate,
     // onListUpdate,
@@ -69,7 +73,6 @@ function FormCreator({
     const [form] = Form.useForm();
 
     let layoutValue;
-
     if (layout) {
         layoutValue = layout
     } else {
@@ -194,11 +197,15 @@ function FormCreator({
             values = await prepareAndExecuteScript(values, null, fieldConfiguration.on_change);
 
         }
+
+        if (onFormValuesChange) {
+            onFormValuesChange(values);
+        }
     }
 
     return (
         <section className="form-creator">
-            <div>
+      
                 {/* <DragDropContext onDragEnd={onDragEnd}>
                 <Droppable droppableId="droppable">
 
@@ -251,6 +258,8 @@ function FormCreator({
                         });
 
                     }}
+                    // layout="inline"
+
                     onFieldsChange={onFieldsChange}
 
                     onValuesChange={onValuesChange}
@@ -265,6 +274,7 @@ function FormCreator({
                     {/* Mapper maps each fields to build the form */}
                     <FieldMapper
                         fields={fields}
+                        reportId={reportId}
                         onChange={onChange}
                         selectedInformation={selectedInformation}
                         onUpload={onUpload}
@@ -278,7 +288,7 @@ function FormCreator({
                         SUBMIT
                     </Button>
                 </Form>
-            </div>
+   
             {/* </div>)}
 
                 </Droppable>
@@ -299,6 +309,7 @@ export default FormCreator;
  */
 function FieldMapper({
     fields = [],
+    reportId,
     onChange,
     selectedInformation,
     onUpload,
@@ -337,6 +348,7 @@ function FieldMapper({
                                         {/* Mapper maps each fields to build the form */}
                                         <FieldMapper
                                             fields={tab.fields}
+                                            reportId={reportId}
                                             onChange={onChange}
                                             onUpload={onUpload}
                                             onFieldUpdate={onFieldUpdate}
@@ -358,6 +370,7 @@ function FieldMapper({
                             ?
                             <UserInput
                                 onChange={onChange}
+                                reportId={reportId}
                                 index={index}
                                 key={index}
                                 onUpload={onUpload}
@@ -371,6 +384,7 @@ function FieldMapper({
                     } else {
                         return <UserInput
                             onChange={onChange}
+                            reportId={reportId}
                             key={index}
                             selectedInformation={selectedInformation}
                             index={index}
@@ -397,7 +411,7 @@ function FieldMapper({
  * 
  * @param {*} param0 
  */
-function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpdate, onFieldRemove, index }) {
+function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpdate, onFieldRemove, index, reportId }) {
 
     let props = {};
 
@@ -423,8 +437,11 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
 
         switch (field.type) {
 
+            case 'search':
+                return <AdvancedSearchSelect {...field} reportId={reportId} style={{ width: '100%' }} />
+
             case 'number':
-                return <InputNumber required={field.required} />
+                return <InputNumber  required={field.required} />
 
             case 'input':
                 return <Input required={field.required} />
@@ -459,7 +476,7 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
                 return <TextArea rows={4} required={field.required} />
 
             case 'boolean':
-                return <Select style={{ width: 120 }} required={field.required}>
+                return <Select style={{ width: '120' }} required={field.required}>
                     {[true, false].map((option, key) => <Option key={key} value={option}>{option ? 'Yes' : 'No'}</Option>)}
                 </Select>
 
@@ -495,7 +512,7 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
                     return (
                         <Select defaultValue={defaultValue}
                             required={field.required}
-                            style={{ width: 120 }}
+                            style={{ width: '120' }}
                             onChange={(value) => onChange(field, value)}
                         >
                             {field.options.map((option, key) => (
@@ -605,7 +622,13 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
                     <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 }]}>
+                    <Form.Item 
+                        {...props} 
+                        name={field.field} 
+                        label={field.caption} 
+                        rules={[{ required: field.required, message: field.placeholder || 'Please enter ' + field.caption }]}
+                        style={{ marginBottom: '12px' }}
+                    >
 
                         {inputElement(field, onChange)}
                         {/* <InputElement field={field} /> */}

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

@@ -1,31 +1,34 @@
 .form-creator {
-    .ant-input-number {
-        width: 100%;
-    }
-
-    .new-record {
-        gap: 10px !important;
-    }
+  .ant-input-number {
+    width: 100%;
+  }
 
-    .form-item-element {
-        position: relative;
-        padding: 8px;
-        border-radius: 4px;
-        // border: 1px solid #e3e3e3;
-        margin-bottom: 3px;
-
-        .field-customizer {
-            .actions {
-                // display: none;
-                float: right;
-                // position: absolute;
-                // right: 0px;
-            }
-        }
+  .new-record {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 10px !important;
+  }
 
+  .form-item-element {
+    position: relative;
+    padding: 4px;
+    // border-radius: 4px;
+    // border: 1px solid #e3e3e3;
+    // margin-bottom: 3px;
+    min-width: 140px;
+    // flex: 0 1 auto;
+    .field-customizer {
+      .actions {
+        // display: none;
+        float: right;
+        // position: absolute;
+        // right: 0px;
+      }
     }
+  }
 
-    .submit-button {
-        margin-top: 10px;
-    }
-}
+  .submit-button {
+    margin-top: 34px;
+  }
+}

package/core/models/core-scripts/core-scripts.js

@@ -9,142 +9,150 @@ import React from 'react';
 
 import Base from '../base/base';
 
-import { ApiUtils } from './../../lib/'
-
+import { ApiUtils } from './../../lib/';
 
 class CoreScript extends Base {
+  constructor() {
+    super();
 
-    constructor() {
-        super();
-
-        this.fields = [
-            {
-                field: 'name',
-                caption: 'Name'
-            },
-            {
-                field: 'amount',
-                caption: 'Amount'
-            }
-        ];
-
-        // this.columns = ;
-    }
-
-    get id() {
-        return 'id';
-    }
-
-    get getEndpoint() {
-        return 'core-scripts';
-    }
-
-
-    get modelName() {
-        return `core-scripts`;
-    }
-
-    get columns() {
-        return [
-            {
-                caption: 'Staff',
-                field: 'staff.name',
-                key: 'staff'
-            },
-            {
-                caption: 'Weight',
-                field: 'weight',
-                key: 'weight'
-            },
-            {
-                caption: 'Date',
-                field: 'created_at',
-                key: 'created_at'
-            }
-        ];
-    }
-
-
-    /**
-     *Getting core_script data
-     * @returns
-     */
-    getReportingLisitng = (id, formBody, dbPtr = null) => {
-        
-        // Settings db pointer
-        if (!dbPtr) dbPtr = localStorage.db_ptr;
-        return ApiUtils.post({
-            url: `core-scripts/dashboardquery/${id}`,
-            formBody,
-            headers: {
-        'Content-Type': 'application/json',
-        Authorization: 'Bearer ' + localStorage.access_token,
-        db_ptr: dbPtr
+    this.fields = [
+      {
+        field: 'name',
+        caption: 'Name',
       },
-        });
-    };
-
+      {
+        field: 'amount',
+        caption: 'Amount',
+      },
+    ];
 
-    /**
-     *Updating user details
-     * @returns
-     */
-    getUserDetailsLisitng = (id, formBody) => {
+    // this.columns = ;
+  }
 
-        return ApiUtils.post({
-            url: `core-scripts/update-user-deatils/${id}`,
-            formBody,
-        });
-    };
+  get id() {
+    return 'id';
+  }
 
+  get getEndpoint() {
+    return 'core-scripts';
+  }
 
-    /**
-     * 
-     */
-    getReportMenu = async ({ id }) => {
-
-        const result = await this.getRecord({ id });
-
-        const report = result.result
-
-        return {
-            ...report,
-            caption: report.caption,
-            path: '/reports/' + report.id,
-            is_visible: true
-        }
-    }
-
-    /**
-      * To get extra script data corresponding to mode
-      *
-      * @param {*} mode
-      * @returns
-      */
-    getExtraInfo = (mode) => {
-        return ApiUtils.get({
-            url: `core-scripts/get-script-data?mode=${mode}`,
-        });
-    };
+  get modelName() {
+    return `core-scripts`;
+  }
 
-
-    /**
-      * To get executed data
-      *
-      * @param {*} mode
-      * @returns
-      */
-
-    getSelectedExtraInfo = (formBody) => {
-        return ApiUtils.post({
-            url: `core-scripts/get-selected-script-data`,
-            formBody,
-            headers: {
-                'Content-Type': 'application/json',
-                Authorization: 'Bearer ' + localStorage.access_token,
-            },
-        });
+  get columns() {
+    return [
+      {
+        caption: 'Staff',
+        field: 'staff.name',
+        key: 'staff',
+      },
+      {
+        caption: 'Weight',
+        field: 'weight',
+        key: 'weight',
+      },
+      {
+        caption: 'Date',
+        field: 'created_at',
+        key: 'created_at',
+      },
+    ];
+  }
+
+  /**
+   *Getting core_script data
+   * @returns
+   */
+  getReportingLisitng = (id, formBody, dbPtr = null) => {
+    // Settings db pointer
+    if (!dbPtr) dbPtr = localStorage.db_ptr;
+    return ApiUtils.post({
+        // baseUrl: 'http://localhost:8002/dev/',  
+      url: `core-scripts/dashboardquery/${id}`,
+      formBody,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + localStorage.access_token,
+        db_ptr: dbPtr,
+      },
+    });
+  };
+
+  /**
+   *Updating user details
+   * @returns
+   */
+  getUserDetailsLisitng = (id, formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/update-user-deatils/${id}`,
+      formBody,
+    });
+  };
+
+  getQuery = (formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/execute-script-api`,
+      formBody,
+    });
+  };
+/**
+ * 
+ */
+  getQuerySeacch = (formBody) => {
+    return ApiUtils.post({
+    //   baseUrl: 'http://localhost:8002/dev/',
+      url: `core-scripts/execute-script-by-search`,
+      formBody,
+    });
+  };
+
+  /**
+   *
+   */
+  getReportMenu = async ({ id }) => {
+    const result = await this.getRecord({ id });
+
+    const report = result.result;
+
+    return {
+      ...report,
+      caption: report.caption,
+      path: '/reports/' + report.id,
+      is_visible: true,
     };
+  };
+
+  /**
+   * To get extra script data corresponding to mode
+   *
+   * @param {*} mode
+   * @returns
+   */
+  getExtraInfo = (mode) => {
+    return ApiUtils.get({
+      url: `core-scripts/get-script-data?mode=${mode}`,
+    });
+  };
+
+  /**
+   * To get executed data
+   *
+   * @param {*} mode
+   * @returns
+   */
+
+  getSelectedExtraInfo = (formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/get-selected-script-data`,
+      formBody,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + localStorage.access_token,
+      },
+    });
+  };
 }
 
 export default CoreScript;

package/core/modules/reporting/components/reporting-dashboard/adavance-search/advance-search.js

@@ -0,0 +1,174 @@
+
+import React, { useState, useEffect, useRef } from "react";
+import { Select, Checkbox, Input, Spin } from "antd";
+import { CoreScripts } from "../../../../../models";
+import "./advance-search.scss";
+
+const { Search } = Input;
+
+export default function AdvancedSearchSelect({ reportId, onReset, field, value, onChange, style, ...rest }) {
+  // Normalize the configuration. 
+  // If 'field' is an object, we are in "legacy" mode. If it's a string, we are using the spread props from rest.
+  const isObjectMode = typeof field === "object";
+  const config = isObjectMode ? field : { ...rest, field };
+  
+  const finalReportId = reportId || config.reportId;
+  const finalOnReset = onReset || config.onReset;
+  const isSearchQuery = !!config.search_query;
+  const fieldName = isObjectMode ? field.field : field;
+  const caption = config.caption;
+
+  const safeValue = Array.isArray(value) ? value : [];
+
+  const [searchResults, setSearchResults] = useState([]);
+  const [displayOptions, setDisplayOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef(null);
+
+  const loadOptions = async (searchText = "") => {
+    try {
+      setLoading(true);
+
+      const formBody = {
+        script_id: finalReportId,
+        search_field: fieldName,
+        search_condition: searchText,
+      };
+
+      const res = await CoreScripts.getQuerySeacch(formBody);
+      const data = Array.isArray(res.data) ? res.data : [];
+      const apiValues = data?.map((r) => r[fieldName]) || [];
+
+      setSearchResults(apiValues);
+      // Refresh display options only when new search results arrive to keep the list stable during interaction
+      setDisplayOptions([
+        ...safeValue,
+        ...apiValues.filter((item) => !safeValue.includes(item)),
+      ]);
+    } catch (error) {
+      console.error("Search API error", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // Clear search results when the field or report context changes, 
+    // but do not load automatically on mount.
+    setSearchResults([]);
+  }, [fieldName, finalReportId]);
+
+  const handleSearch = (text) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => loadOptions(text), 400);
+  };
+
+  const toggleValue = (checked, item) => {
+    let newValues;
+
+    if (checked) newValues = [...safeValue, item];
+    else newValues = safeValue.filter((v) => v !== item);
+
+    onChange(newValues);
+  };
+
+  const handleReset = () => {
+    onChange([]);
+    if (finalOnReset) {
+      finalOnReset();   // 🔥 trigger dashboard refresh
+    }
+  };
+
+  const isActive = safeValue.length > 0;
+
+  // -------- INPUT MODE --------
+  if (!isSearchQuery) {
+    return (
+      <Input
+        allowClear
+        className={`advanced-search-input ${isActive ? "advanced-search-active" : ""}`}
+        placeholder={`Search ${caption}`}
+      style={style}
+        // The parent provides an array for `value`.
+        // We take the first element for the input's display value.
+        value={safeValue[0] || ""}
+        onChange={(e) => {
+          const text = e?.target?.value;
+          // Always pass an array back to the parent to be consistent with the Select mode.
+          onChange(text ? [text] : []);
+          if (!text && finalOnReset) {
+            finalOnReset();
+          }
+        }}
+      />
+    );
+  }
+
+  // -------- SELECT MODE --------
+  return (
+    <Select
+      className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
+      style={style}
+      mode="multiple"
+      value={safeValue}
+      placeholder={caption}
+      onDropdownVisibleChange={(open) => {
+        if (open) {
+          loadOptions("");
+        } else {
+          // When closing, re-sort selected items to the top so they are visible next time it opens
+          const currentResults = searchResults.length > 0 ? searchResults : displayOptions;
+          setDisplayOptions([
+            ...safeValue,
+            ...currentResults.filter((item) => !safeValue.includes(item)),
+          ]);
+        }
+      }}
+      allowClear
+      maxTagCount={1}
+      onChange={onChange}
+      maxTagPlaceholder={(omittedValues) => (
+        <span className="tag-placeholder-count">
+          +{omittedValues.length}
+        </span>
+      )}
+      dropdownRender={() => (
+        <div className="dropdown-content">
+          <Search
+            placeholder={`Search ${caption}`}
+            onChange={(e) => handleSearch(e.target.value)}
+          />
+
+          <div className="dropdown-options-list">
+            {loading ? (
+              <Spin />
+            ) : (
+              displayOptions.map((item, idx) => (
+                <div 
+                  key={`${item}-${idx}`} 
+                  className="dropdown-option-item"
+                  onClick={() => toggleValue(!safeValue.includes(item), item)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <Checkbox
+                    checked={safeValue.includes(item)}
+                    onClick={(e) => e.stopPropagation()} // Prevent double trigger when clicking the checkbox box specifically
+                    onChange={(e) => toggleValue(e.target.checked, item)}
+                  >
+                    {item}
+                  </Checkbox>
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="dropdown-footer">
+            <span className="dropdown-reset-button" onClick={handleReset}>
+              Reset
+            </span>
+          </div>
+        </div>
+      )}
+    />
+  );
+}

package/core/modules/reporting/components/reporting-dashboard/adavance-search/advance-search.scss

@@ -0,0 +1,76 @@
+// .advanced-search-select,
+/* Base select width */
+.advanced-search-select {
+  width: 160px;
+  // width: 100%;
+}
+.advanced-search-input {
+  width: 160px;
+}
+/* Active state (when value selected) */
+.advanced-search-select.advanced-search-active .ant-select-selector {
+  border-color: #1677ff !important;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2) !important;
+  border-radius: 6px !important;
+}
+
+/* Input active state */
+.advanced-search-input.advanced-search-active {
+  border-color: #1677ff !important;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+  border-radius: 6px;
+}
+// .advanced-search-input {
+//   width: 250px;
+
+//   &.advanced-search-active {
+//     // Antd Select and Input don't share the same border-radius property,
+//     // so we apply a wrapper style that works for both.
+//     // For more specific control, you might need to target internal antd classes.
+//     border: 1px solid #91caff !important;
+//     box-shadow: 0 0 0 1px #91caff;
+//     border-radius: 6px;
+//   }
+
+.tag-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .tag-placeholder-count {
+    background: #e6f0ff;
+    color: #1677ff;
+    border-radius: 10px;
+    padding: 0 8px;
+    font-weight: 600;
+    font-size: 12px;
+  }
+}
+
+.dropdown-content {
+  padding: 10px;
+
+  .dropdown-options-list {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 10px;
+
+    .dropdown-option-item {
+      margin-bottom: 6px;
+    }
+  }
+
+  .dropdown-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    border-top: 1px solid #f0f0f0;
+    padding-top: 8px;
+
+    .dropdown-reset-button {
+      color: #1677ff;
+      cursor: pointer;
+      font-weight: 500;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 
-import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
+import { Table, Skeleton, Input, Modal, message, Pagination, Tag } from 'antd';
 
 import { QrcodeOutlined } from '@ant-design/icons';
 
@@ -17,10 +17,10 @@ import './reporting-dashboard.scss';
 // import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
 import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
 import { useHistory } from 'react-router-dom';
-
 import * as ReportingDashboardComp from '../index';
 import buildDisplayColumns from './display-columns/build-display-columns';
 import { getRedirectLink } from './display-columns/display-cell-renderer';
+import AdvancedSearchSelect from './adavance-search/advance-search';
 
 // import { isPdfFile } from 'pdfjs-dist';
 
@@ -56,15 +56,20 @@ export default function ReportingDashboard({
   const [config, setConfig] = useState({});
 
   // State to manage the layout of the form
-  const [formLayout, setFormLayout] = useState('inline');
+  const [formLayout, setFormLayout] = useState('vertical');
 
   const [loading, setLoading] = useState(true);
 
   const [cardLoading, setCardLoading] = useState(true);
 
+  const [searchParameters, setSearchParameters] = useState([]);
+
+  const [searchValues, setSearchValues] = useState({});
+
   const [dashboardVisible, setDashBoardVisible] = useState(false);
 
   const [formContents, setformContents] = useState({});
+  const [liveFormContents, setLiveFormContents] = useState({});
 
   const scriptId = useRef(null);
 
@@ -112,7 +117,7 @@ export default function ReportingDashboard({
       }
       setColumns(parsedColumns);
 
-      await prepareInputParameters(result, parsedColumns);
+      await prepareInputParameters(result, parsedColumns, fetchId);
 
       if (result.summary_columns) {
         setSummaryColumns(JSON.parse(result.summary_columns));
@@ -157,7 +162,7 @@ export default function ReportingDashboard({
    */
 
   //Prepare input parameters by mapping default values and binding models if needed
-  async function prepareInputParameters(record, parsedColumns) {
+  async function prepareInputParameters(record, parsedColumns, fetchId) {
     setLoading(true);
     let urlParams = Location.search();
 
@@ -166,9 +171,11 @@ export default function ReportingDashboard({
 
     let otherDetails = record.other_details1 ? JSON.parse(record.other_details1) : null;
 
-    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
+    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : [];
 
     let formContent = {};
+    const searchFields = (parameters || []).filter((p) => p.type === 'search' && p.search_enabled === 'yes');
+    setSearchParameters([...searchFields]);
 
     parameters = await parameters?.map((record) => {
       // Only if the url params does have a matching value ,
@@ -212,7 +219,15 @@ export default function ReportingDashboard({
       if (record.type === 'date' && !formContent[record.field]) {
         formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
       }
-
+      if (record.type === 'search') {
+        if (!formContent[record.field]) formContent[record.field] = [];
+        return {
+          ...record,
+          reportId: fetchId,
+          onReset: () => getPatientDetails(fetchId),
+          required: record.required,
+        };
+      }
       if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
         // let model = "";
         let model = CustomModels[record.modelName];
@@ -231,6 +246,7 @@ export default function ReportingDashboard({
     });
     // Update form content state
     setformContents(formContent);
+    setLiveFormContents(formContent);
 
     // Trigger form submission
     onFinish(formContent, null, record.input_parameters, parsedColumns);
@@ -242,12 +258,8 @@ export default function ReportingDashboard({
       // If enabled, clear the details array
       setDetails([]);
     } else {
-      //// Filter the array "parameters" and keep only elements where "type" is present (truthy)
-      //Keep only parameters that have a "type" → used for UI display
-      let filter = parameters.filter((ele) => ele.type);
-      // Update the "details" state with the filtered results
-
-      setDetails([...filter]);
+      // Keep all parameters with a type (including search) to render in FormCreator
+      setDetails([...parameters.filter((ele) => ele.type)]);
     }
   }
 
@@ -261,6 +273,7 @@ export default function ReportingDashboard({
     const { current, pageSize } = pagination || {};
     // If card script id is exist load that id otherwise load id
     const coreScriptId = scriptId.current ? scriptId.current : id;
+    const normalizedColumns = Array.isArray(parsedColumns) ? parsedColumns : Array.isArray(columns) ? columns : [];
 
     setLoading(true);
     try {
@@ -286,6 +299,7 @@ export default function ReportingDashboard({
       if (scope) {
         formBody = { body: { ...scope, ...paginationData } };
       }
+
       // Fetch result
       const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
 
@@ -299,8 +313,8 @@ export default function ReportingDashboard({
       // Update patients
       setPatients(resultDetails || []);
 
-      // Check if columns are not yet defined
-      if (parsedColumns.length === 0 && resultDetails.length > 0) {
+      // When display_columns is missing, build columns from the response keys.
+      if (normalizedColumns.length === 0 && resultDetails.length > 0) {
         // Create columns dynamically from resultDetails keys
         setColumns((prev) => {
           if (prev.length > 0) return prev;
@@ -330,31 +344,127 @@ export default function ReportingDashboard({
     }
   };
 
-  // Handle Submit
   const handleSubmit = (values) => {
+    // Extract search fields from the form values
+    const searchKeys = searchParameters.map((p) => p.field);
+    const currentSearchValues = {};
+    const formValues = {};
+
+    Object.keys(values).forEach((key) => {
+      if (searchKeys.includes(key)) {
+        currentSearchValues[key] = values[key];
+      } else {
+        formValues[key] = values[key];
+      }
+    });
+
+    const hasSearchValues = Object.values(currentSearchValues).some((v) => Array.isArray(v) && v.length > 0);
+
+    if (!hasSearchValues) {
+      runSubmit(formValues);
+      return;
+    }
+
+    // Check if main form values (non-search) changed
+    const formChanged = Object.keys(formValues).some((key) => {
+      const newVal = formValues[key];
+      const oldVal = formContents[key];
+
+      if (moment.isMoment(newVal) && moment.isMoment(oldVal)) {
+        return !newVal.isSame(oldVal, 'day');
+      }
+
+      return newVal !== oldVal;
+    });
+
+    if (formChanged) {
+      Modal.confirm({
+        title: 'Filters changed',
+        content: 'You changed some filters. Do you want to search using these filters also?',
+        okText: 'Yes',
+        cancelText: 'No',
+
+        onOk() {
+          // YES → send form values + search condition
+          const finalValues = {
+            ...formValues,
+            search_values: currentSearchValues,
+          };
+
+          runSubmit(finalValues);
+        },
+
+        onCancel() {
+          // NO → reset form values
+          const resetValues = {};
+          Object.keys(formValues).forEach((key) => {
+            resetValues[key] = null;
+          });
+
+          const finalValues = {
+            ...resetValues,
+            search_values: currentSearchValues,
+          };
+
+          runSubmit(finalValues);
+        },
+      });
+    } else {
+      // no form change
+      const resetValues = {};
+      Object.keys(formValues).forEach((key) => {
+        resetValues[key] = null;
+      });
+
+      const finalValues = {
+        ...resetValues,
+        search_values: currentSearchValues,
+      };
+
+      runSubmit(finalValues);
+    }
+  };
+
+  const runSubmit = (finalValues) => {
     const { pageSize } = pagination;
     const resetPage = 1;
 
-    // Reset script id on Submit
     scriptId.current = null;
 
-    // Get current query params
-    const currentUrlParams = Location.search();
-    const { script_id, selected_card, ...cleanParams } = currentUrlParams;
+    const hasSearchValues = finalValues.search_values && Object.values(finalValues.search_values).some((v) => Array.isArray(v) && v.length > 0);
 
-    // Construct new query string
-    const newParams = new URLSearchParams({
-      ...cleanParams,
-      current: resetPage,
-      pageSize,
-    });
+    if (!hasSearchValues) {
+      const currentUrlParams = Location.search();
+      const { script_id, selected_card, ...cleanParams } = currentUrlParams;
 
-    // Replace URL
-    const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-    window.history.replaceState({}, '', newUrl);
+      const newParams = new URLSearchParams({
+        ...cleanParams,
+        current: resetPage,
+        pageSize,
+      });
+
+      const newUrl = `${window.location.pathname}?${newParams.toString()}`;
+      window.history.replaceState({}, '', newUrl);
+    }
 
-    // Trigger submit handler
-    onFinish(values, resetPage);
+    onFinish(finalValues, resetPage);
+  };
+
+  const selectedSearchFields = details.filter((field) => {
+    if (field.type !== 'search') return false;
+
+    const value = liveFormContents[field.field];
+    return Array.isArray(value) ? value.length > 0 : !!value;
+  });
+
+  const handleRemoveSearchField = (fieldName) => {
+    const updatedValues = {
+      ...liveFormContents,
+      [fieldName]: [],
+    };
+
+    setLiveFormContents(updatedValues);
+    handleSubmit(updatedValues);
   };
 
   /**
@@ -389,6 +499,12 @@ export default function ReportingDashboard({
         //Getting url friendly value by matching the url values and input_parameter values
         let value = values[parameter.field];
 
+        // If the value is missing at the root level (which happens when search fields are moved 
+        // into search_values during submission), try to retrieve it from the nested object.
+        if (value === undefined && values.search_values && values.search_values[parameter.field] !== undefined) {
+          value = values.search_values[parameter.field];
+        }
+
         // Keep Moment object in state for picker
         if (parameter.type === 'date' && value) {
           formContent[parameter.field] = value.isValid ? value : moment(value); // ensure Moment
@@ -410,6 +526,7 @@ export default function ReportingDashboard({
       );
 
       setformContents(formContent);
+      setLiveFormContents(formContent);
       Location.search({ ...Location.search(), ...filteredParams });
     }
 
@@ -505,17 +622,18 @@ export default function ReportingDashboard({
                 }}
                 styles={{ paddingRight: '15px', alignItems: 'center' }}
                 fields={details}
+                reportId={id}
                 formContent={formContents}
                 // formContent={{ [model]: {} }}
                 modelIndex="requestId"
                 model={model}
                 onSubmit={handleSubmit}
+                onFormValuesChange={setLiveFormContents}
                 callback={() => {
                   // history.goBack();
                 }}
               />
             ) : null}
-            {/* </Card> */}
           </div>
 
           {/** GuestList component start*/}
@@ -533,6 +651,8 @@ export default function ReportingDashboard({
             pagination={pagination}
             handlePagination={handlePagination}
             attributes={attributes}
+            selectedSearchFields={selectedSearchFields}
+            handleRemoveSearchField={handleRemoveSearchField}
             fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
           />
           {/** GuestList component end*/}
@@ -566,6 +686,8 @@ function GuestList({
   pagination,
   handlePagination,
   attributes,
+  selectedSearchFields,
+  handleRemoveSearchField,
   fetchReportData,
 }) {
   /**
@@ -824,13 +946,31 @@ function GuestList({
     <>
       <div className="table-header">
         <div className="table-left">
-          {/* shwoing caption is not correct so this commented */}
-          {/* <span  className="menu-caption">{config.caption}</span> */}
-          <Search placeholder="Enter Search Value" allowClear onChange={onSearch} />
-          {/* <p className="size-hint">{patients.length} records.</p> */}
+          {/* {selectedSearchFields?.length > 0 ? (
+            <div className="search-tags-container">
+              {selectedSearchFields.map((field) => (
+                <Tag key={field.field} closable color="blue" onClose={() => handleRemoveSearchField(field.field)}>
+                  {field.caption}
+                </Tag>
+              ))}
+            </div>
+          ) : null} */}
         </div>
 
         <div className="table-right">
+          {/* shwoing caption is not correct so this commented */}
+          {/* <span  className="menu-caption">{config.caption}</span> */}
+          <Search className="table-search-input" placeholder="Enter Search Value" allowClear onChange={onSearch} />
+          <div className="table-export-button">
+            {exportData.exportDatas && (
+              <ExportReactCSV
+                title={config.caption}
+                headers={exportData.exportDatas.exportDataHeaders}
+                csvData={exportData.exportDatas.exportDataColumns}
+              />
+            )}
+          </div>
+
           {/* QR Scan start */}
           {showScanner ? (
             <Button size="small" type="primary" icon={<QrcodeOutlined />} onClick={() => setScannerVisible(true)}>
@@ -863,19 +1003,7 @@ function GuestList({
           <Modal open={isScannerVisible} title="Scan QR Code" footer={null} onCancel={() => setScannerVisible(false)} destroyOnClose>
             <QrScanner onScanSuccess={handleScanSuccess} onClose={() => setScannerVisible(false)} />
           </Modal>
-
-          <div>
-            {/* QR Scan End */}
-            {/*table data export to csc component*/}
-            {exportData.exportDatas && (
-              <ExportReactCSV
-                title={config.caption}
-                fileName={`${(config.caption || 'Report').trim().replace(/\s+/g, '_')}_${moment().format('YYYY-MM-DD-HH-mm-ss-SSS')}.xlsx`}
-                headers={exportData.exportDatas.exportDataHeaders}
-                csvData={exportData.exportDatas.exportDataColumns}
-              />
-            )}
-          </div>
+          {/* QR Scan End */}
         </div>
       </div>
 

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

@@ -16,12 +16,17 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 12px;
     padding-bottom: 10px;
     padding-top: 10px;
 
     .table-left {
       display: flex;
       align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+      margin-left: 6px;
 
       .menu-caption {
         min-width: 100px;
@@ -31,9 +36,23 @@
 
     .table-right{
       display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-wrap: nowrap;
       gap: 4px;
     }
   }
+
+  .table-search-input {
+    width: 220px;
+    min-width: 220px;
+  }
+
+  .table-export-button {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
   
 
   .form-card {
@@ -48,6 +67,23 @@
     padding: 0px;
   }
 
+  .search-tags-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+  }
+
+  .search-tags-container .ant-tag {
+    flex-shrink: 0;
+    margin-inline-end: 0;
+  }
+
   // margin: 0px 10px;
 
   .ant-skeleton {

package/package.json

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