ui-soxo-bootstrap-core 2.6.1-dev.10 → 2.6.1-dev.12

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

@@ -1,18 +1,20 @@
 
-
 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({ field, value = [], onChange }) {
-  const [searchResults, setSearchResults] = useState([]); // only API results
-  const [selectedItems, setSelectedItems] = useState(value); // persisted selections
+export default function AdvancedSearchSelect({ reportId, field, value = [], onChange ,onReset}) {
+
+  const isSearchQuery = !!field.search_query;
+
+  const [searchResults, setSearchResults] = useState([]);
+  const [selectedItems, setSelectedItems] = useState(value);
   const [loading, setLoading] = useState(false);
   const debounceRef = useRef(null);
 
-  // Sync selectedItems if parent value changes externally
   useEffect(() => {
     setSelectedItems(value);
   }, [value]);
@@ -21,11 +23,14 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
     try {
       setLoading(true);
 
-      let query = field?.search_query || "";
-      query = query.replace("@search_text;", searchText || "");
+      const formBody = {
+        script_id: reportId,
+        search_field: field.field,
+        search_condition: searchText,
+      };
 
-      const res = await CoreScripts.getQuery({ script: query });
-      const data = Array.isArray(res) ? res[0] : [];
+      const res = await CoreScripts.getQuerySeacch(formBody);
+      const data = Array.isArray(res.data) ? res.data : [];
       const apiValues = data?.map((r) => r[field.field]) || [];
 
       setSearchResults(apiValues);
@@ -37,7 +42,7 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
   };
 
   useEffect(() => {
-    loadOptions("");
+    if (isSearchQuery) loadOptions("");
   }, [field]);
 
   const handleSearch = (text) => {
@@ -48,61 +53,77 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
   const toggleValue = (checked, item) => {
     let newValues;
 
-    if (checked) {
-      newValues = [...selectedItems, item];
-    } else {
-      newValues = selectedItems.filter((v) => v !== item);
-    }
+    if (checked) newValues = [...selectedItems, item];
+    else newValues = selectedItems.filter((v) => v !== item);
 
-    setSelectedItems(newValues); // update local persisted state immediately
+    setSelectedItems(newValues);
     onChange(newValues);
   };
 
-  // Merge: selected items always on top, then search results (excluding already selected)
+  const handleReset = () => {
+    setSelectedItems([]);
+    onChange([]);
+    // if (onReset) {
+    onReset();   // 🔥 trigger dashboard refresh
+  // }
+  };
+
   const displayOptions = [
     ...selectedItems,
     ...searchResults.filter((item) => !selectedItems.includes(item)),
   ];
 
+  const isActive = value && value.length > 0;
+
+  // -------- INPUT MODE --------
+  if (!isSearchQuery) {
+    return (
+      <Input
+        className={`advanced-search-input ${isActive ? "advanced-search-active" : ""}`}
+        placeholder={`Search ${field.caption}`}
+        // The parent provides an array for `value`.
+        // We take the first element for the input's display value.
+        value={value[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] : []);
+        }}
+      />
+    );
+  }
+
+  // -------- SELECT MODE --------
   return (
     <Select
+      className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
       mode="multiple"
       value={value}
-      style={{ width: 250 }}
       placeholder={field.caption}
       allowClear
       maxTagCount={0}
       onChange={onChange}
       maxTagPlaceholder={() => (
-        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <span className="tag-placeholder">
           {field.caption}
-          <span
-            style={{
-              background: "#e6f0ff",
-              color: "#1677ff",
-              borderRadius: "10px",
-              padding: "0 8px",
-              fontWeight: 600,
-              fontSize: 12,
-            }}
-          >
+          <span className="tag-placeholder-count">
             {value?.length || 0}
           </span>
         </span>
       )}
       dropdownRender={() => (
-        <div style={{ padding: 10 }}>
+        <div className="dropdown-content">
           <Search
             placeholder={`Search ${field.caption}`}
             onChange={(e) => handleSearch(e.target.value)}
           />
 
-          <div style={{ maxHeight: 200, overflowY: "auto", marginTop: 10 }}>
+          <div className="dropdown-options-list">
             {loading ? (
               <Spin />
             ) : (
               displayOptions.map((item) => (
-                <div key={item} style={{ marginBottom: 6 }}>
+                <div key={item} className="dropdown-option-item">
                   <Checkbox
                     checked={selectedItems.includes(item)}
                     onChange={(e) => toggleValue(e.target.checked, item)}
@@ -113,6 +134,12 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
               ))
             )}
           </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;
+}
+.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

@@ -173,7 +173,7 @@ export default function ReportingDashboard({
     parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
 
     let formContent = {};
-    const searchFields = parameters.filter((p) => p.type === 'search');
+    const searchFields = parameters.filter((p) => p.type === 'search' && p.search_enabled === 'yes');
     setSearchParameters([...searchFields]);
 
     parameters = await parameters?.map((record) => {
@@ -344,171 +344,98 @@ export default function ReportingDashboard({
     }
   };
 
-  /**
-   * 
-   * @param {*} searchValues 
-   * @param {*} searchParameters 
-   * @returns 
-   */
-  const buildSearchCondition = (searchValues, searchParameters) => {
-  let searchCondition = "";
-
-  Object.keys(searchValues).forEach((key) => {
-    const arr = searchValues[key];
-    if (!Array.isArray(arr) || arr.length === 0) return;
-
-    const param = searchParameters.find((p) => p.field === key);
-    if (!param) return;
-
-    const operator = (param.search_operator || "").trim().toUpperCase();
-    const column = param.db_column || key;
-
-    if (operator === "LIKE") {
-      const likeConditions = arr
-        .map((v) => `${column} LIKE '${v}'`)
-        .join(" OR ");
-      searchCondition += ` AND (${likeConditions})`;
-    }
-
-    else if (operator === "IN") {
-      const valueList = arr.map((v) => `'${v}'`).join(",");
-      searchCondition += ` AND ${column} IN (${valueList})`;
-    }
-
-    else if (operator === "=") {
-      const eqConditions = arr
-        .map((v) => `${column} = '${v}'`)
-        .join(" OR ");
-      searchCondition += ` AND (${eqConditions})`;
-    }
-
-    else if (operator === "!=") {
-      const neqConditions = arr
-        .map((v) => `${column} != '${v}'`)
-        .join(" AND ");
-      searchCondition += ` AND (${neqConditions})`;
-    }
+  const handleSubmit = (values) => {
+    const hasSearchValues = Object.values(searchValues).some((v) => Array.isArray(v) && v.length > 0);
 
-    else {
-      // fallback for other operators like > < >= <=
-      const conditions = arr
-        .map((v) => `${column} ${operator} '${v}'`)
-        .join(" OR ");
-      searchCondition += ` AND (${conditions})`;
+    if (!hasSearchValues) {
+      runSubmit(values);
+      return;
     }
-  });
 
-  return searchCondition;
-};
-const handleSubmit = (values) => {
+    // Check if form values changed (date or others)
+    const formChanged = Object.keys(values).some((key) => {
+      const newVal = values[key];
+      const oldVal = formContents[key];
 
-  const hasSearchValues = Object.values(searchValues).some(
-    (v) => Array.isArray(v) && v.length > 0
-  );
-
-  let finalValues = values;
-
-  if (hasSearchValues) {
-
-    const searchCondition = buildSearchCondition(
-      searchValues,
-      searchParameters
-    );
+      if (moment.isMoment(newVal) && moment.isMoment(oldVal)) {
+        return !newVal.isSame(oldVal, 'day');
+      }
 
-    const resetValues = {};
-    Object.keys(values).forEach((key) => {
-      resetValues[key] = null;
+      return newVal !== oldVal;
     });
 
-    finalValues = {
-      ...resetValues,
-      search_condition: searchCondition,
-    };
-  }
+    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 = {
+            ...values,
+            search_values: searchValues,
+          };
+
+          runSubmit(finalValues);
+        },
 
-  const { pageSize } = pagination;
-  const resetPage = 1;
+        onCancel() {
+          // NO → reset form values
+          const resetValues = {};
+          Object.keys(values).forEach((key) => {
+            resetValues[key] = null;
+          });
 
-  scriptId.current = null;
+          const finalValues = {
+            ...resetValues,
+            search_values: searchValues,
+          };
 
-  if (!hasSearchValues) {
-    const currentUrlParams = Location.search();
-    const { script_id, selected_card, ...cleanParams } = currentUrlParams;
+          runSubmit(finalValues);
+        },
+      });
+    } else {
+      // no form change
+      const resetValues = {};
+      Object.keys(values).forEach((key) => {
+        resetValues[key] = null;
+      });
 
-    const newParams = new URLSearchParams({
-      ...cleanParams,
-      current: resetPage,
-      pageSize,
-    });
+      const finalValues = {
+        ...resetValues,
+        search_values: searchValues,
+      };
 
-    const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-    window.history.replaceState({}, "", newUrl);
-  }
+      runSubmit(finalValues);
+    }
+  };
 
-  onFinish(finalValues, resetPage);
-};
-  // const handleSubmit = (values) => {
-
-  //   // Check if any advanced search value exists
-  //   const hasSearchValues = Object.values(searchValues).some((v) => Array.isArray(v) && v.length > 0);
-
-  //   let finalValues = values;
-  //   let searchCondition = '';
-  //   if (hasSearchValues) {
-  //     Object.keys(searchValues).forEach((key) => {
-  //       const arr = searchValues[key];
-  //       if (!Array.isArray(arr) || arr.length === 0) return;
-
-  //       // Find input parameter configuration
-  //       const param = searchParameters.find((p) => p.field === key);
-  //       if (!param) return;
-
-  //       const operator = (param.search_operator || '').trim(); // LIKE / IN / =
-  //       const column = param.db_column || key; // DB column mapping if available
-
-  //       // Build value list
-  //       const valueList = arr.map((v) => `'${v}'`).join(',');
-
-  //       // Build SQL condition dynamically
-  //       searchCondition += ` AND ${column} ${operator} (${valueList})`;
-  //     });
-
-  //     // Reset normal form parameters
-  //     const resetValues = {};
-  //     Object.keys(values).forEach((key) => {
-  //       resetValues[key] = null;
-  //     });
-
-  //     // Final values sent to API
-  //     finalValues = {
-  //       ...resetValues,
-  //       search_condition: searchCondition,
-  //     };
-  //   }
+  const runSubmit = (finalValues) => {
+    const { pageSize } = pagination;
+    const resetPage = 1;
 
-  //   const { pageSize } = pagination;
-  //   const resetPage = 1;
+    scriptId.current = null;
 
-  //   scriptId.current = null;
+    const hasSearchValues = finalValues.search_values && Object.values(finalValues.search_values).some((v) => Array.isArray(v) && v.length > 0);
 
-  //   // Update URL only when NOT using advanced search
-  //   if (!hasSearchValues) {
-  //     const currentUrlParams = Location.search();
-  //     const { script_id, selected_card, ...cleanParams } = currentUrlParams;
+    if (!hasSearchValues) {
+      const currentUrlParams = Location.search();
+      const { script_id, selected_card, ...cleanParams } = currentUrlParams;
 
-  //     const newParams = new URLSearchParams({
-  //       ...cleanParams,
-  //       current: resetPage,
-  //       pageSize,
-  //     });
+      const newParams = new URLSearchParams({
+        ...cleanParams,
+        current: resetPage,
+        pageSize,
+      });
 
-  //     const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-  //     window.history.replaceState({}, '', newUrl);
-  //   }
+      const newUrl = `${window.location.pathname}?${newParams.toString()}`;
+      window.history.replaceState({}, '', newUrl);
+    }
 
-  //   // Call report API
-  //   onFinish(finalValues, resetPage);
-  // };
+    onFinish(finalValues, resetPage);
+  };
   /**
    *
    * @param {*} values
@@ -675,6 +602,7 @@ const handleSubmit = (values) => {
                       key={param.field}
                       parameter={param}
                       field={param}
+                      reportId={reportId}
                       value={searchValues[param.field] || []}
                       onChange={(value) => {
                         setSearchValues((prev) => ({
@@ -682,6 +610,32 @@ const handleSubmit = (values) => {
                           [param.field]: value,
                         }));
                       }}
+                      onReset={() => {
+                        setSearchValues((prev) => {
+                          const updated = {
+                            ...prev,
+                            [param.field]: [],
+                          };
+
+                          // const finalValues = {
+                          //   ...formContents,
+                          //   search_values: updated,
+                          // };
+                          // console.log(finalValues);
+                          // runSubmit(finalValues); // 🔥 refresh report correctly
+                          getPatientDetails();
+
+                          return updated;
+                        });
+                      }}
+                      // onReset={() => {
+                      //   setSearchValues((prev) => ({
+                      //     ...prev,
+                      //     [param.field]: [],
+                      //   }));
+
+                      //   handleSubmit(formContents); // 🔥 refresh report
+                      // }}
                     />
                   ))
                 : null}

package/core/modules/steps/action-buttons.js

@@ -13,6 +13,8 @@ export default function ActionButtons({
   steps,
   activeStep,
   isStepCompleted,
+  isFullscreen,
+  onToggleFullscreen,
   renderDynamicComponent,
   handlePrevious,
   handleNext,
@@ -37,6 +39,10 @@ export default function ActionButtons({
           Back
         </Button>
 
+        <Button type="default" onClick={onToggleFullscreen}>
+          {isFullscreen ? 'Exit Full Screen' : 'Switch to Full Screen'}
+        </Button>
+
         {/* Skip button */}
         {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
           <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>

package/core/modules/steps/action-buttons.scss

@@ -11,6 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
+
   padding-bottom: 8px;
 }
 
@@ -27,7 +28,6 @@
   border-top: 1px solid #f0f0f0;
   box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
 
-
   width: 61%;
   padding: 10px;
   position: fixed;
@@ -37,9 +37,15 @@
   display: flex;
   border-radius: 4px;
   box-shadow: -1px -4px 10px 2px #f7f7f76e;
-
+  flex-wrap: wrap;
 
   .ant-btn {
     border-radius: 4px;
   }
-}
+}
+
+.process-steps-page.is-fullscreen .action-buttons-container {
+  width: calc(100% - 24px);
+  left: 12px;
+  right: 12px;
+}

package/core/modules/steps/steps.js

@@ -8,7 +8,7 @@
  * - Handles process submission and optional chaining to the next process.
  * - Provides a collapsible timeline view and action controls.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Row, Col, Empty } from 'antd';
 import { Card } from './../../lib';
 import * as genericComponents from './../../lib';
@@ -36,8 +36,11 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const [timelineCollapsed, setTimelineCollapsed] = useState(false);
   const [showExternalWindow, setShowExternalWindow] = useState(false);
   const [externalWin, setExternalWin] = useState(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const processStepsRef = useRef(null);
 
   const urlParams = Location.search();
+  const isConsultationMode = String(urlParams?.consultation).toLowerCase() === 'true';
   let processId = urlParams.processId;
   const [currentProcessId, setCurrentProcessId] = useState(processId);
   // Load process details based on the current process ID
@@ -271,13 +274,49 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     };
   }, [activeStep, steps, externalWin]);
 
+  useEffect(() => {
+    const syncFullscreenState = () => {
+      setIsFullscreen(document.fullscreenElement === processStepsRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', syncFullscreenState);
+    syncFullscreenState();
+
+    return () => {
+      document.removeEventListener('fullscreenchange', syncFullscreenState);
+    };
+  }, []);
+
+  const handleToggleFullscreen = async () => {
+    const element = processStepsRef.current;
+    if (!element) return;
+
+    try {
+      if (document.fullscreenElement === element) {
+        if (document.exitFullscreen) {
+          await document.exitFullscreen();
+        }
+        return;
+      }
+
+      if (element.requestFullscreen) {
+        await element.requestFullscreen();
+      }
+    } catch (error) {
+      console.error('Unable to toggle full screen for steps page:', error);
+    }
+  };
+
   /**
    * Renders the main process UI including timeline, step details,
    * and action buttons. This content is reused in both normal view
    * and external window view.
    */
-  const renderContent = () => (
-    <div className="process-steps-page">
+  const renderContent = (attachRef = true) => (
+    <div
+      ref={attachRef ? processStepsRef : null}
+      className={`process-steps-page ${isConsultationMode ? 'consultation-mode' : ''} ${isFullscreen ? 'is-fullscreen' : ''}`}
+    >
       <Card className="process-steps-card">
         <Row gutter={20} className="process-steps-row" align="stretch">
           <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6} className="process-steps-timeline-col">
@@ -302,6 +341,8 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               steps={steps}
               activeStep={activeStep}
               isStepCompleted={isStepCompleted}
+              isFullscreen={isFullscreen}
+              onToggleFullscreen={handleToggleFullscreen}
               renderDynamicComponent={DynamicComponent}
               handlePrevious={handlePrevious}
               handleNext={handleNext}
@@ -335,9 +376,9 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
           width={props.ExternalWindowWidth || 1000}
           height={props.ExternalWindowHeight || 1000}
         >
-          {renderContent()}
+          {renderContent(false)}
         </ExternalWindow>
-        {renderContent()}
+        {renderContent(true)}
       </>
     );
   }