ui-soxo-bootstrap-core 2.6.1-dev.26 → 2.6.1-dev.27

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/lib/modules/generic/generic-list/ExportReactCSV.js

@@ -10,6 +10,8 @@
 import React from 'react';
 // Import XLSX library to handle Excel file creation
 import * as XLSX from 'xlsx';
+// import * as XLSX from 'xlsx-js-style';
+// import * as XLSX from 'xlsx-js-style';
 // Import saveAs from file-saver to trigger file download in browser
 import { saveAs } from 'file-saver';
 import { Button } from 'antd';
@@ -30,7 +32,27 @@ export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
       // Extract label names for the header row
       const headerLabels = headers.map((h) => h.label);
       // Map data rows according to the headers' key order
-      const rows = csvData.map((row) => headers.map((h) => row[h.key]));
+      const rows = csvData.map((row) =>
+        headers.map((h, hIndex) => {
+          let value = row[h.key];
+          // If it's a summary row, return a cell object with bold styling
+          if (row.isSummaryRow) {
+            // Remove the index value (typically the first column) for the summary row
+            if (hIndex === 0) value = "";
+
+            return {
+              v: value,
+              s: {
+                font: { bold: true },
+                // "Thick" visual indicator via border
+                // Visual indicator via border
+                border: { bottom: { style: "thick", color: { rgb: "000000" } } }
+              }
+            };
+          }
+          return value;
+        })
+      );
       // Create a worksheet from an array of arrays (header + rows)
       const data = [[title || "Report"], [], headerLabels, ...rows];
       // worksheet = XLSX.utils.aoa_to_sheet([headerLabels, ...rows]);
@@ -44,7 +66,11 @@ export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
     // Append the worksheet to the workbook with the name 'Sheet1'
     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
     // Write workbook to a buffer as an array
-    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: 'xlsx',
+      type: 'array',
+      cellStyles: true, // Required to export styles
+    });
     // Create a Blob object from the buffer with correct MIME type
     const blob = new Blob([excelBuffer], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

package/core/lib/utils/generic/generic.utils.js

@@ -31,7 +31,8 @@ export function getExportData(records, exportDataColumns) {
     const response = records.map((row, columnIndex) => {
 
         let entry = {
-            'Sl No': columnIndex + 1
+            'Sl No': row.isSummaryRow ? '' : columnIndex + 1,
+            isSummaryRow: row.isSummaryRow
         };
 
         filteredColumns.forEach((column, indexValue) => {

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

@@ -6,34 +6,45 @@ import "./advance-search.scss";
 
 const { Search } = Input;
 
-export default function AdvancedSearchSelect({ reportId, field, value = [], onChange ,onReset}) {
-
-  const isSearchQuery = !!field.search_query;
+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 [selectedItems, setSelectedItems] = useState(value);
+  const [displayOptions, setDisplayOptions] = useState([]);
   const [loading, setLoading] = useState(false);
   const debounceRef = useRef(null);
 
-  useEffect(() => {
-    setSelectedItems(value);
-  }, [value]);
-
   const loadOptions = async (searchText = "") => {
     try {
       setLoading(true);
 
       const formBody = {
-        script_id: reportId,
-        search_field: field.field,
+        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[field.field]) || [];
+      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 {
@@ -42,8 +53,10 @@ export default function AdvancedSearchSelect({ reportId, field, value = [], onCh
   };
 
   useEffect(() => {
-    if (isSearchQuery) loadOptions("");
-  }, [field]);
+    // 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);
@@ -53,41 +66,39 @@ export default function AdvancedSearchSelect({ reportId, field, value = [], onCh
   const toggleValue = (checked, item) => {
     let newValues;
 
-    if (checked) newValues = [...selectedItems, item];
-    else newValues = selectedItems.filter((v) => v !== item);
+    if (checked) newValues = [...safeValue, item];
+    else newValues = safeValue.filter((v) => v !== item);
 
-    setSelectedItems(newValues);
     onChange(newValues);
   };
 
   const handleReset = () => {
-    setSelectedItems([]);
     onChange([]);
-    // if (onReset) {
-    onReset();   // 🔥 trigger dashboard refresh
-  // }
+    if (finalOnReset) {
+      finalOnReset();   // 🔥 trigger dashboard refresh
+    }
   };
 
-  const displayOptions = [
-    ...selectedItems,
-    ...searchResults.filter((item) => !selectedItems.includes(item)),
-  ];
-
-  const isActive = value && value.length > 0;
+  const isActive = safeValue.length > 0;
 
   // -------- INPUT MODE --------
   if (!isSearchQuery) {
     return (
       <Input
+        allowClear
         className={`advanced-search-input ${isActive ? "advanced-search-active" : ""}`}
-        placeholder={`Search ${field.caption}`}
+        placeholder={`Search ${caption}`}
+      style={style}
         // The parent provides an array for `value`.
         // We take the first element for the input's display value.
-        value={value[0] || ""}
+        value={safeValue[0] || ""}
         onChange={(e) => {
-          const text = e.target.value;
+          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();
+          }
         }}
       />
     );
@@ -97,24 +108,34 @@ export default function AdvancedSearchSelect({ reportId, field, value = [], onCh
   return (
     <Select
       className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
+      style={style}
       mode="multiple"
-      value={value}
-      placeholder={field.caption}
+      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={0}
+      maxTagCount={1}
       onChange={onChange}
-      maxTagPlaceholder={() => (
-        <span className="tag-placeholder">
-          {field.caption}
-          <span className="tag-placeholder-count">
-            {value?.length || 0}
-          </span>
+      maxTagPlaceholder={(omittedValues) => (
+        <span className="tag-placeholder-count">
+          +{omittedValues.length}
         </span>
       )}
       dropdownRender={() => (
         <div className="dropdown-content">
           <Search
-            placeholder={`Search ${field.caption}`}
+            placeholder={`Search ${caption}`}
             onChange={(e) => handleSearch(e.target.value)}
           />
 
@@ -122,10 +143,16 @@ export default function AdvancedSearchSelect({ reportId, field, value = [], onCh
             {loading ? (
               <Spin />
             ) : (
-              displayOptions.map((item) => (
-                <div key={item} className="dropdown-option-item">
+              displayOptions.map((item, idx) => (
+                <div 
+                  key={`${item}-${idx}`} 
+                  className="dropdown-option-item"
+                  onClick={() => toggleValue(!safeValue.includes(item), item)}
+                  style={{ cursor: 'pointer' }}
+                >
                   <Checkbox
-                    checked={selectedItems.includes(item)}
+                    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}
@@ -144,4 +171,4 @@ export default function AdvancedSearchSelect({ reportId, field, value = [], onCh
       )}
     />
   );
-}
+}

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

@@ -2,6 +2,7 @@
 /* Base select width */
 .advanced-search-select {
   width: 160px;
+  // width: 100%;
 }
 .advanced-search-input {
   width: 160px;
@@ -30,7 +31,6 @@
 //     box-shadow: 0 0 0 1px #91caff;
 //     border-radius: 6px;
 //   }
-// }
 
 .tag-placeholder {
   display: flex;
@@ -73,4 +73,4 @@
       font-weight: 500;
     }
   }
-}
+}