@visns-studio/visns-components 5.5.5 → 5.5.7

package/src/components/crm/generic/GenericReport.jsx

@@ -177,6 +177,47 @@ const isJsonValue = (value) => {
     return typeof value === 'object' && value !== null;
 };
 
+// Helper function to convert the enhanced filter structure to a flat array for the backend
+const flattenFilterCriteria = (filterCriteria) => {
+    // If it's already a flat array (legacy format), return it as is
+    if (Array.isArray(filterCriteria)) {
+        return filterCriteria;
+    }
+
+    // If it's the new structure with groups and operators
+    if (filterCriteria.groups && Array.isArray(filterCriteria.groups)) {
+        const flattenedFilters = [];
+
+        // Process each group
+        filterCriteria.groups.forEach((group, groupIndex) => {
+            // Only add filters from non-empty groups
+            if (group.filters && group.filters.length > 0) {
+                // Add all filters from this group
+                group.filters.forEach((filter) => {
+                    // Add a special property to indicate which group this filter belongs to
+                    // and the operator to use within this group
+                    const enhancedFilter = {
+                        ...filter,
+                        _group: groupIndex,
+                        _group_operator: group.operator,
+                    };
+                    flattenedFilters.push(enhancedFilter);
+                });
+            }
+        });
+
+        // If we have multiple groups, add the main operator as a property to the first filter
+        if (filterCriteria.groups.length > 1 && flattenedFilters.length > 0) {
+            flattenedFilters[0]._main_operator = filterCriteria.operator;
+        }
+
+        return flattenedFilters;
+    }
+
+    // If it's neither a flat array nor the new structure, return an empty array
+    return [];
+};
+
 const GenericReport = ({ setting = {} }) => {
     // Extract settings with defaults
     const { tableUrl, columnUrl } = setting;
@@ -219,8 +260,10 @@ const GenericReport = ({ setting = {} }) => {
                         <li style="margin-bottom: 4px; font-size: 14px !important;">You can sort by multiple columns (e.g., sort by last name, then by first name)</li>
                         <li style="margin-bottom: 4px; font-size: 14px !important;">Choose between ascending (A-Z, 0-9) or descending (Z-A, 9-0) order</li>
                         <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Filtering</strong>: Click the "Filtering" header to expand the section, then add filter criteria</li>
-                        <li style="margin-bottom: 4px; font-size: 14px !important;">Use operators like equals, contains, greater than, etc. to narrow down results</li>
-                        <li style="margin-bottom: 4px; font-size: 14px !important;">Combine multiple filters for precise data selection (all filters are combined with AND logic)</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Use operators like "contains" or "is exactly equal to" to narrow down results</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Create multiple filter groups and choose whether to join them with ALL or ANY logic</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Within each filter group, choose whether conditions are joined with ALL (all must match) or ANY (any can match)</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">This powerful combination allows for complex queries like "(A AND B) OR (C AND D)"</li>
                         <li style="font-size: 14px !important;">Sorting and filtering settings are saved with your report for future use</li>
                     </ul>
 
@@ -233,11 +276,69 @@ const GenericReport = ({ setting = {} }) => {
                         <li style="margin-bottom: 4px; font-size: 14px !important;">Consider adding date fields to enable time-based filtering</li>
                         <li style="font-size: 14px !important;">Save frequently used reports for quick access</li>
                     </ul>
+                </div>
+            `,
+            width: 550,
+            confirmButtonText: 'Got it!',
+            confirmButtonColor: '#2563eb',
+            customClass: {
+                title: 'swal-title',
+                htmlContainer: 'swal-html-container',
+                confirmButton: 'swal-confirm-button',
+            },
+        });
+    };
 
+    // Help function specifically for filtering
+    const showFilteringHelp = () => {
+        Swal.fire({
+            title: 'Understanding Filtering',
+            html: `
+                <div style="text-align: left; margin-bottom: 20px; font-size: 14px; color: #4b5563;">
+                    <h4 style="font-size: 16px; color: #1f2937; margin-bottom: 10px; font-weight: 600;">Filtering Basics:</h4>
+                    <p style="margin-bottom: 8px; line-height: 1.4;">Filtering allows you to narrow down your report results to show only the data you're interested in.</p>
 
+                    <h4 style="font-size: 16px; color: #1f2937; margin-bottom: 10px; margin-top: 16px; font-weight: 600;">Filter Groups:</h4>
+                    <p style="margin-bottom: 8px; line-height: 1.4;">You can create multiple filter groups to build complex conditions:</p>
+                    <ul style="padding-left: 18px; line-height: 1.4; font-size: 14px !important; margin-bottom: 14px;">
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Each filter group can contain one or more conditions</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Within a group, you can choose whether ALL conditions must match or ANY condition can match</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Between groups, you can also choose ALL groups must match or ANY group can match</li>
+                    </ul>
+
+                    <h4 style="font-size: 16px; color: #1f2937; margin-bottom: 10px; margin-top: 16px; font-weight: 600;">Filter Operators:</h4>
+                    <p style="margin-bottom: 8px; line-height: 1.4;">Each filter condition uses an operator to compare values:</p>
+                    <ul style="padding-left: 18px; line-height: 1.4; font-size: 14px !important; margin-bottom: 14px;">
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Is exactly equal to</strong>: Matches records where the field exactly matches your value</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Is not equal to</strong>: Matches records where the field does not match your value</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Contains</strong>: Matches records where the field contains your value anywhere within it</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Does not contain</strong>: Matches records where the field does not contain your value</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Is greater than</strong>: Matches records where the field is greater than your value (for numbers and dates)</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Is less than</strong>: Matches records where the field is less than your value (for numbers and dates)</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Is empty</strong>: Matches records where the field has no value</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Is not empty</strong>: Matches records where the field has any value</li>
+                    </ul>
+
+                    <h4 style="font-size: 16px; color: #1f2937; margin-bottom: 10px; margin-top: 16px; font-weight: 600;">Examples:</h4>
+                    <p style="margin-bottom: 8px; line-height: 1.4;">Here are some examples of how to use filtering:</p>
+                    <ul style="padding-left: 18px; line-height: 1.4; font-size: 14px !important; margin-bottom: 14px;">
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Simple filter</strong>: Find all clients where Name contains "ABC"</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Multiple conditions (ALL)</strong>: Find clients where Name contains "ABC" AND State is "NSW"</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Multiple conditions (ANY)</strong>: Find clients where Name contains "ABC" OR Name contains "XYZ"</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;"><strong>Complex filter</strong>: Find clients where (Name contains "ABC" AND State is "NSW") OR (Name contains "XYZ" AND State is "VIC")</li>
+                    </ul>
+
+                    <h4 style="font-size: 16px; color: #1f2937; margin-bottom: 10px; margin-top: 16px; font-weight: 600;">Tips for Effective Filtering:</h4>
+                    <ul style="padding-left: 18px; line-height: 1.4; font-size: 14px !important; margin-bottom: 14px;">
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Start with simple filters and add complexity as needed</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Use "Contains" for partial text matching (e.g., searching for part of a name)</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Use date filters to find records within specific time periods</li>
+                        <li style="margin-bottom: 4px; font-size: 14px !important;">Group related conditions together in the same filter group</li>
+                        <li style="font-size: 14px !important;">Test your filters by executing the query to make sure they work as expected</li>
+                    </ul>
                 </div>
             `,
-            width: 550,
+            width: 650,
             confirmButtonText: 'Got it!',
             confirmButtonColor: '#2563eb',
             customClass: {
@@ -351,7 +452,18 @@ const GenericReport = ({ setting = {} }) => {
 
     // State for sorting and filtering
     const [sortCriteria, setSortCriteria] = useState([]);
-    const [filterCriteria, setFilterCriteria] = useState([]);
+
+    // Enhanced filter criteria with support for AND/OR logic
+    // Structure: { operator: 'AND'|'OR', groups: [{ operator: 'AND'|'OR', filters: [...] }] }
+    const [filterCriteria, setFilterCriteria] = useState({
+        operator: 'AND',
+        groups: [
+            {
+                operator: 'AND',
+                filters: [],
+            },
+        ],
+    });
 
     // State for report execution
     const [totalResults, setTotalResults] = useState(0);
@@ -889,8 +1001,8 @@ const GenericReport = ({ setting = {} }) => {
         }
     };
 
-    // Add a new filter criterion
-    const handleAddFilterCriterion = () => {
+    // Add a new filter criterion to a specific group
+    const handleAddFilterCriterion = (groupIndex = 0) => {
         // Default to the first selected column if available
         const defaultColumn =
             selectedColumns.length > 0
@@ -908,25 +1020,132 @@ const GenericReport = ({ setting = {} }) => {
             value: '',
         };
 
-        setFilterCriteria([...filterCriteria, newFilterCriterion]);
+        // Create a deep copy of the current filter criteria
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        // Add the new filter to the specified group
+        updatedFilterCriteria.groups[groupIndex].filters.push(
+            newFilterCriterion
+        );
+
+        setFilterCriteria(updatedFilterCriteria);
+        setShowFilteringSection(true);
+    };
+
+    // Add a new filter group
+    const handleAddFilterGroup = () => {
+        // Create a deep copy of the current filter criteria
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        // Add a new empty filter group
+        updatedFilterCriteria.groups.push({
+            operator: 'AND',
+            filters: [],
+        });
+
+        setFilterCriteria(updatedFilterCriteria);
         setShowFilteringSection(true);
     };
 
     // Update a filter criterion
-    const handleFilterCriterionChange = (index, field, value) => {
-        const updatedFilterCriteria = [...filterCriteria];
-        updatedFilterCriteria[index][field] = value;
+    const handleFilterCriterionChange = (
+        groupIndex,
+        filterIndex,
+        field,
+        value
+    ) => {
+        // Create a deep copy of the current filter criteria
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        // Update the specified field of the filter
+        updatedFilterCriteria.groups[groupIndex].filters[filterIndex][field] =
+            value;
+
         setFilterCriteria(updatedFilterCriteria);
     };
 
     // Remove a filter criterion
-    const handleRemoveFilterCriterion = (index) => {
-        const updatedFilterCriteria = [...filterCriteria];
-        updatedFilterCriteria.splice(index, 1);
+    const handleRemoveFilterCriterion = (groupIndex, filterIndex) => {
+        // Create a deep copy of the current filter criteria
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        // Remove the filter from the specified group
+        updatedFilterCriteria.groups[groupIndex].filters.splice(filterIndex, 1);
+
         setFilterCriteria(updatedFilterCriteria);
 
-        // Hide the section if no filter criteria remain
-        if (updatedFilterCriteria.length === 0) {
+        // Check if all groups are empty
+        const allGroupsEmpty = updatedFilterCriteria.groups.every(
+            (group) => group.filters.length === 0
+        );
+
+        // Hide the section if all groups are empty
+        if (allGroupsEmpty) {
+            setShowFilteringSection(false);
+        }
+    };
+
+    // Update a filter group's operator (AND/OR)
+    const handleFilterGroupOperatorChange = (groupIndex, newOperator) => {
+        // Create a deep copy of the current filter criteria
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        // Update the operator for the specified group
+        updatedFilterCriteria.groups[groupIndex].operator = newOperator;
+
+        setFilterCriteria(updatedFilterCriteria);
+    };
+
+    // Update the main filter operator (AND/OR between groups)
+    const handleMainFilterOperatorChange = (newOperator) => {
+        // Create a deep copy of the current filter criteria
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        // Update the main operator
+        updatedFilterCriteria.operator = newOperator;
+
+        setFilterCriteria(updatedFilterCriteria);
+    };
+
+    // Remove a filter group
+    const handleRemoveFilterGroup = (groupIndex) => {
+        // Create a deep copy of the current filter criteria
+        const updatedFilterCriteria = JSON.parse(
+            JSON.stringify(filterCriteria)
+        );
+
+        // Remove the group
+        updatedFilterCriteria.groups.splice(groupIndex, 1);
+
+        // If no groups remain, add an empty one
+        if (updatedFilterCriteria.groups.length === 0) {
+            updatedFilterCriteria.groups.push({
+                operator: 'AND',
+                filters: [],
+            });
+        }
+
+        setFilterCriteria(updatedFilterCriteria);
+
+        // Check if all groups are empty
+        const allGroupsEmpty = updatedFilterCriteria.groups.every(
+            (group) => group.filters.length === 0
+        );
+
+        // Hide the section if all groups are empty
+        if (allGroupsEmpty) {
             setShowFilteringSection(false);
         }
     };
@@ -1134,11 +1353,36 @@ const GenericReport = ({ setting = {} }) => {
                 }
 
                 // Set filtering criteria
-                if (detail.filters && Array.isArray(detail.filters)) {
-                    setFilterCriteria(detail.filters);
-                    // Show filtering section if there are filter criteria
-                    if (detail.filters.length > 0) {
-                        setShowFilteringSection(true);
+                if (detail.filters) {
+                    // Check if it's the new structure with groups and operators
+                    if (
+                        detail.filters.groups &&
+                        Array.isArray(detail.filters.groups)
+                    ) {
+                        setFilterCriteria(detail.filters);
+                        // Show filtering section if there are filter criteria in any group
+                        const hasFilters = detail.filters.groups.some(
+                            (group) => group.filters && group.filters.length > 0
+                        );
+                        if (hasFilters) {
+                            setShowFilteringSection(true);
+                        }
+                    } else if (Array.isArray(detail.filters)) {
+                        // Handle legacy format - convert to new structure
+                        const newFilterCriteria = {
+                            operator: 'AND',
+                            groups: [
+                                {
+                                    operator: 'AND',
+                                    filters: detail.filters,
+                                },
+                            ],
+                        };
+                        setFilterCriteria(newFilterCriteria);
+                        // Show filtering section if there are filter criteria
+                        if (detail.filters.length > 0) {
+                            setShowFilteringSection(true);
+                        }
                     }
                 }
 
@@ -1222,11 +1466,37 @@ const GenericReport = ({ setting = {} }) => {
                     }
 
                     // Set filtering criteria
-                    if (detail.filters && Array.isArray(detail.filters)) {
-                        setFilterCriteria(detail.filters);
-                        // Show filtering section if there are filter criteria
-                        if (detail.filters.length > 0) {
-                            setShowFilteringSection(true);
+                    if (detail.filters) {
+                        // Check if it's the new structure with groups and operators
+                        if (
+                            detail.filters.groups &&
+                            Array.isArray(detail.filters.groups)
+                        ) {
+                            setFilterCriteria(detail.filters);
+                            // Show filtering section if there are filter criteria in any group
+                            const hasFilters = detail.filters.groups.some(
+                                (group) =>
+                                    group.filters && group.filters.length > 0
+                            );
+                            if (hasFilters) {
+                                setShowFilteringSection(true);
+                            }
+                        } else if (Array.isArray(detail.filters)) {
+                            // Handle legacy format - convert to new structure
+                            const newFilterCriteria = {
+                                operator: 'AND',
+                                groups: [
+                                    {
+                                        operator: 'AND',
+                                        filters: detail.filters,
+                                    },
+                                ],
+                            };
+                            setFilterCriteria(newFilterCriteria);
+                            // Show filtering section if there are filter criteria
+                            if (detail.filters.length > 0) {
+                                setShowFilteringSection(true);
+                            }
                         }
                     }
 
@@ -1268,7 +1538,8 @@ const GenericReport = ({ setting = {} }) => {
                     sourceColumn: join.sourceColumn,
                     targetColumn: join.targetColumn,
                 })),
-                filters: filterCriteria,
+                // Convert the enhanced filter structure to a flat array that the backend expects
+                filters: flattenFilterCriteria(filterCriteria),
                 sorting: sortCriteria,
             };
 
@@ -1445,7 +1716,8 @@ const GenericReport = ({ setting = {} }) => {
                     sourceColumn: join.sourceColumn,
                     targetColumn: join.targetColumn,
                 })),
-                filters: filterCriteria,
+                filters: filterCriteria, // Save the enhanced filter structure with groups and operators
+                // Note: We're saving the full structure here, not flattening it, so we can load it properly later
                 sorting: sortCriteria,
             };
 
@@ -1517,6 +1789,14 @@ const GenericReport = ({ setting = {} }) => {
                                 <Question size={18} />
                                 <span>Data types</span>
                             </button>
+                            <button
+                                className={styles.helpButton}
+                                onClick={showFilteringHelp}
+                                title="Learn about filtering"
+                            >
+                                <Question size={18} />
+                                <span>Filtering</span>
+                            </button>
                         </div>
                     </div>
                     <div className={styles.titleInfo}>
@@ -2832,14 +3112,26 @@ const GenericReport = ({ setting = {} }) => {
                                 }
                             >
                                 <h3>Filtering</h3>
-                                <div
-                                    className={`${styles.toggleBtn} ${
-                                        showFilteringSection
-                                            ? styles.toggleBtnActive
-                                            : ''
-                                    }`}
-                                >
-                                    {showFilteringSection ? '▲' : '▼'}
+                                <div className={styles.sectionHeaderActions}>
+                                    <button
+                                        className={styles.helpButton}
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            showFilteringHelp();
+                                        }}
+                                        title="Learn about filtering"
+                                    >
+                                        <Question size={16} />
+                                    </button>
+                                    <div
+                                        className={`${styles.toggleBtn} ${
+                                            showFilteringSection
+                                                ? styles.toggleBtnActive
+                                                : ''
+                                        }`}
+                                    >
+                                        {showFilteringSection ? '▲' : '▼'}
+                                    </div>
                                 </div>
                             </div>
 
@@ -2847,164 +3139,334 @@ const GenericReport = ({ setting = {} }) => {
                                 <>
                                     <div
                                         className={
-                                            styles.addManualJoinContainer
+                                            styles.filterOperatorContainer
                                         }
                                     >
-                                        <button
-                                            className={styles.btn}
-                                            onClick={handleAddFilterCriterion}
-                                            disabled={
-                                                selectedColumns.length === 0
+                                        <div
+                                            className={
+                                                styles.mainFilterOperator
                                             }
                                         >
-                                            Add Filter Criterion
-                                        </button>
-                                    </div>
+                                            <label>Match:</label>
+                                            <div
+                                                className={
+                                                    styles.operatorOptions
+                                                }
+                                            >
+                                                <div
+                                                    className={`${
+                                                        styles.operatorOption
+                                                    } ${
+                                                        filterCriteria.operator ===
+                                                        'AND'
+                                                            ? styles.operatorOptionSelected
+                                                            : ''
+                                                    }`}
+                                                    onClick={() =>
+                                                        handleMainFilterOperatorChange(
+                                                            'AND'
+                                                        )
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.operatorName
+                                                        }
+                                                    >
+                                                        ALL
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            styles.operatorDescription
+                                                        }
+                                                    >
+                                                        All filter groups must
+                                                        match
+                                                    </div>
+                                                </div>
+                                                <div
+                                                    className={`${
+                                                        styles.operatorOption
+                                                    } ${
+                                                        filterCriteria.operator ===
+                                                        'OR'
+                                                            ? styles.operatorOptionSelected
+                                                            : ''
+                                                    }`}
+                                                    onClick={() =>
+                                                        handleMainFilterOperatorChange(
+                                                            'OR'
+                                                        )
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.operatorName
+                                                        }
+                                                    >
+                                                        ANY
+                                                    </div>
+                                                    <div
+                                                        className={
+                                                            styles.operatorDescription
+                                                        }
+                                                    >
+                                                        Any filter group can
+                                                        match
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
 
-                                    {filterCriteria.length > 0 && (
                                         <div
                                             className={
-                                                styles.joinTablesContainer
+                                                styles.filterActionButtons
                                             }
                                         >
-                                            {filterCriteria.map(
-                                                (criterion, index) => (
+                                            <button
+                                                className={styles.btn}
+                                                onClick={handleAddFilterGroup}
+                                                disabled={
+                                                    selectedColumns.length === 0
+                                                }
+                                            >
+                                                Add Filter Group
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    {filterCriteria.groups.map(
+                                        (group, groupIndex) => (
+                                            <div
+                                                key={`group-${groupIndex}`}
+                                                className={styles.filterGroup}
+                                            >
+                                                <div
+                                                    className={
+                                                        styles.filterGroupHeader
+                                                    }
+                                                >
                                                     <div
-                                                        key={index}
                                                         className={
-                                                            styles.joinSection
+                                                            styles.filterGroupTitle
                                                         }
                                                     >
+                                                        <h4>
+                                                            Filter Group{' '}
+                                                            {groupIndex + 1}
+                                                        </h4>
                                                         <div
                                                             className={
-                                                                styles.joinHeader
+                                                                styles.filterGroupOperator
                                                             }
                                                         >
-                                                            <h4>
-                                                                Filter on{' '}
-                                                                {criterion.table &&
-                                                                criterion.column
-                                                                    ? `${formatName(
-                                                                          criterion.table
-                                                                      )}.${formatName(
-                                                                          criterion.column
-                                                                      )}`
-                                                                    : `Criterion #${
-                                                                          index +
-                                                                          1
-                                                                      }`}
-                                                            </h4>
-                                                            <button
+                                                            <label>
+                                                                Match:
+                                                            </label>
+                                                            <div
                                                                 className={
-                                                                    styles.removeJoinBtn
+                                                                    styles.operatorButtonGroup
                                                                 }
-                                                                onClick={() =>
-                                                                    handleRemoveFilterCriterion(
-                                                                        index
-                                                                    )
-                                                                }
-                                                                title="Remove Filter Criterion"
                                                             >
-                                                                ×
-                                                            </button>
+                                                                <button
+                                                                    type="button"
+                                                                    className={`${
+                                                                        styles.operatorButton
+                                                                    } ${
+                                                                        group.operator ===
+                                                                        'AND'
+                                                                            ? styles.operatorButtonSelected
+                                                                            : ''
+                                                                    }`}
+                                                                    onClick={() =>
+                                                                        handleFilterGroupOperatorChange(
+                                                                            groupIndex,
+                                                                            'AND'
+                                                                        )
+                                                                    }
+                                                                >
+                                                                    ALL
+                                                                </button>
+                                                                <button
+                                                                    type="button"
+                                                                    className={`${
+                                                                        styles.operatorButton
+                                                                    } ${
+                                                                        group.operator ===
+                                                                        'OR'
+                                                                            ? styles.operatorButtonSelected
+                                                                            : ''
+                                                                    }`}
+                                                                    onClick={() =>
+                                                                        handleFilterGroupOperatorChange(
+                                                                            groupIndex,
+                                                                            'OR'
+                                                                        )
+                                                                    }
+                                                                >
+                                                                    ANY
+                                                                </button>
+                                                            </div>
                                                         </div>
+                                                    </div>
 
-                                                        <div
+                                                    <div
+                                                        className={
+                                                            styles.filterGroupActions
+                                                        }
+                                                    >
+                                                        <button
                                                             className={
-                                                                styles.joinGrid
+                                                                styles.btn
+                                                            }
+                                                            onClick={() =>
+                                                                handleAddFilterCriterion(
+                                                                    groupIndex
+                                                                )
+                                                            }
+                                                            disabled={
+                                                                selectedColumns.length ===
+                                                                0
                                                             }
                                                         >
-                                                            <div
+                                                            Add Filter
+                                                        </button>
+                                                        {filterCriteria.groups
+                                                            .length > 1 && (
+                                                            <button
                                                                 className={
-                                                                    styles.joinGridColumn
+                                                                    styles.removeJoinBtn
                                                                 }
+                                                                onClick={() =>
+                                                                    handleRemoveFilterGroup(
+                                                                        groupIndex
+                                                                    )
+                                                                }
+                                                                title="Remove Filter Group"
                                                             >
+                                                                ×
+                                                            </button>
+                                                        )}
+                                                    </div>
+                                                </div>
+
+                                                {group.filters.length > 0 ? (
+                                                    <div
+                                                        className={
+                                                            styles.joinTablesContainer
+                                                        }
+                                                    >
+                                                        {group.filters.map(
+                                                            (
+                                                                criterion,
+                                                                filterIndex
+                                                            ) => (
                                                                 <div
+                                                                    key={`filter-${groupIndex}-${filterIndex}`}
                                                                     className={
-                                                                        styles.joinField
+                                                                        styles.joinSection
                                                                     }
                                                                 >
-                                                                    <label>
-                                                                        Column:
-                                                                    </label>
-                                                                    <select
+                                                                    <div
                                                                         className={
-                                                                            styles.selectControl
+                                                                            styles.joinHeader
                                                                         }
-                                                                        value={`${criterion.table}.${criterion.column}`}
-                                                                        onChange={(
-                                                                            e
-                                                                        ) => {
-                                                                            const [
-                                                                                table,
-                                                                                column,
-                                                                            ] =
-                                                                                e.target.value.split(
-                                                                                    '.'
-                                                                                );
-                                                                            handleFilterCriterionChange(
-                                                                                index,
-                                                                                'table',
-                                                                                table
-                                                                            );
-                                                                            handleFilterCriterionChange(
-                                                                                index,
-                                                                                'column',
-                                                                                column
-                                                                            );
-                                                                        }}
                                                                     >
-                                                                        <option value="">
-                                                                            Select
-                                                                            Column
-                                                                        </option>
-                                                                        {/* Main table columns */}
-                                                                        <optgroup
-                                                                            label={`${formatName(
-                                                                                selectedTable
-                                                                            )} Columns`}
-                                                                        >
-                                                                            {tableColumns.map(
-                                                                                (
-                                                                                    column
-                                                                                ) => (
-                                                                                    <option
-                                                                                        key={`${selectedTable}.${column.name}`}
-                                                                                        value={`${selectedTable}.${column.name}`}
-                                                                                    >
-                                                                                        {formatName(
-                                                                                            column.name
-                                                                                        )}
-                                                                                    </option>
+                                                                        <h4>
+                                                                            Filter
+                                                                            on{' '}
+                                                                            {criterion.table &&
+                                                                            criterion.column
+                                                                                ? `${formatName(
+                                                                                      criterion.table
+                                                                                  )}.${formatName(
+                                                                                      criterion.column
+                                                                                  )}`
+                                                                                : `Criterion #${
+                                                                                      filterIndex +
+                                                                                      1
+                                                                                  }`}
+                                                                        </h4>
+                                                                        <button
+                                                                            className={
+                                                                                styles.removeJoinBtn
+                                                                            }
+                                                                            onClick={() =>
+                                                                                handleRemoveFilterCriterion(
+                                                                                    groupIndex,
+                                                                                    filterIndex
                                                                                 )
-                                                                            )}
-                                                                        </optgroup>
+                                                                            }
+                                                                            title="Remove Filter Criterion"
+                                                                        >
+                                                                            ×
+                                                                        </button>
+                                                                    </div>
 
-                                                                        {/* Joined tables columns */}
-                                                                        {joins.map(
-                                                                            (
-                                                                                join,
-                                                                                joinIndex
-                                                                            ) =>
-                                                                                join.targetTable &&
-                                                                                join.availableColumns &&
-                                                                                join
-                                                                                    .availableColumns
-                                                                                    .length >
-                                                                                    0 ? (
+                                                                    <div
+                                                                        className={
+                                                                            styles.joinGrid
+                                                                        }
+                                                                    >
+                                                                        <div
+                                                                            className={
+                                                                                styles.joinGridColumn
+                                                                            }
+                                                                        >
+                                                                            <div
+                                                                                className={
+                                                                                    styles.joinField
+                                                                                }
+                                                                            >
+                                                                                <label>
+                                                                                    Column:
+                                                                                </label>
+                                                                                <select
+                                                                                    className={
+                                                                                        styles.selectControl
+                                                                                    }
+                                                                                    value={`${criterion.table}.${criterion.column}`}
+                                                                                    onChange={(
+                                                                                        e
+                                                                                    ) => {
+                                                                                        const [
+                                                                                            table,
+                                                                                            column,
+                                                                                        ] =
+                                                                                            e.target.value.split(
+                                                                                                '.'
+                                                                                            );
+                                                                                        handleFilterCriterionChange(
+                                                                                            groupIndex,
+                                                                                            filterIndex,
+                                                                                            'table',
+                                                                                            table
+                                                                                        );
+                                                                                        handleFilterCriterionChange(
+                                                                                            groupIndex,
+                                                                                            filterIndex,
+                                                                                            'column',
+                                                                                            column
+                                                                                        );
+                                                                                    }}
+                                                                                >
+                                                                                    <option value="">
+                                                                                        Select
+                                                                                        Column
+                                                                                    </option>
+                                                                                    {/* Main table columns */}
                                                                                     <optgroup
-                                                                                        key={`join-${joinIndex}`}
                                                                                         label={`${formatName(
-                                                                                            join.targetTable
+                                                                                            selectedTable
                                                                                         )} Columns`}
                                                                                     >
-                                                                                        {join.availableColumns.map(
+                                                                                        {tableColumns.map(
                                                                                             (
                                                                                                 column
                                                                                             ) => (
                                                                                                 <option
-                                                                                                    key={`${join.targetTable}.${column.name}`}
-                                                                                                    value={`${join.targetTable}.${column.name}`}
+                                                                                                    key={`${selectedTable}.${column.name}`}
+                                                                                                    value={`${selectedTable}.${column.name}`}
                                                                                                 >
                                                                                                     {formatName(
                                                                                                         column.name
@@ -3013,144 +3475,194 @@ const GenericReport = ({ setting = {} }) => {
                                                                                             )
                                                                                         )}
                                                                                     </optgroup>
-                                                                                ) : null
-                                                                        )}
-                                                                    </select>
-                                                                </div>
-                                                            </div>
 
-                                                            <div
-                                                                className={
-                                                                    styles.joinGridColumn
-                                                                }
-                                                            >
-                                                                <div
-                                                                    className={
-                                                                        styles.joinField
-                                                                    }
-                                                                >
-                                                                    <label>
-                                                                        Operator:
-                                                                    </label>
-                                                                    <select
-                                                                        className={
-                                                                            styles.selectControl
-                                                                        }
-                                                                        value={
-                                                                            criterion.operator
-                                                                        }
-                                                                        onChange={(
-                                                                            e
-                                                                        ) =>
-                                                                            handleFilterCriterionChange(
-                                                                                index,
-                                                                                'operator',
-                                                                                e
-                                                                                    .target
-                                                                                    .value
-                                                                            )
-                                                                        }
-                                                                    >
-                                                                        <option value="=">
-                                                                            Equals
-                                                                            (=)
-                                                                        </option>
-                                                                        <option value="!=">
-                                                                            Not
-                                                                            Equals
-                                                                            (!=)
-                                                                        </option>
-                                                                        <option value="&gt;">
-                                                                            Greater
-                                                                            Than
-                                                                            (&gt;)
-                                                                        </option>
-                                                                        <option value="&lt;">
-                                                                            Less
-                                                                            Than
-                                                                            (&lt;)
-                                                                        </option>
-                                                                        <option value="&gt;=">
-                                                                            Greater
-                                                                            Than
-                                                                            or
-                                                                            Equal
-                                                                            (&gt;=)
-                                                                        </option>
-                                                                        <option value="&lt;=">
-                                                                            Less
-                                                                            Than
-                                                                            or
-                                                                            Equal
-                                                                            (&lt;=)
-                                                                        </option>
-                                                                        <option value="LIKE">
-                                                                            Contains
-                                                                            (LIKE)
-                                                                        </option>
-                                                                        <option value="NOT LIKE">
-                                                                            Does
-                                                                            Not
-                                                                            Contain
-                                                                            (NOT
-                                                                            LIKE)
-                                                                        </option>
-                                                                        <option value="IS NULL">
-                                                                            Is
-                                                                            Empty
-                                                                            (NULL)
-                                                                        </option>
-                                                                        <option value="IS NOT NULL">
-                                                                            Is
-                                                                            Not
-                                                                            Empty
-                                                                            (NOT
-                                                                            NULL)
-                                                                        </option>
-                                                                    </select>
-                                                                </div>
+                                                                                    {/* Joined tables columns */}
+                                                                                    {joins.map(
+                                                                                        (
+                                                                                            join,
+                                                                                            joinIndex
+                                                                                        ) =>
+                                                                                            join.targetTable &&
+                                                                                            join.availableColumns &&
+                                                                                            join
+                                                                                                .availableColumns
+                                                                                                .length >
+                                                                                                0 ? (
+                                                                                                <optgroup
+                                                                                                    key={`join-${joinIndex}`}
+                                                                                                    label={`${formatName(
+                                                                                                        join.targetTable
+                                                                                                    )} Columns`}
+                                                                                                >
+                                                                                                    {join.availableColumns.map(
+                                                                                                        (
+                                                                                                            column
+                                                                                                        ) => (
+                                                                                                            <option
+                                                                                                                key={`${join.targetTable}.${column.name}`}
+                                                                                                                value={`${join.targetTable}.${column.name}`}
+                                                                                                            >
+                                                                                                                {formatName(
+                                                                                                                    column.name
+                                                                                                                )}
+                                                                                                            </option>
+                                                                                                        )
+                                                                                                    )}
+                                                                                                </optgroup>
+                                                                                            ) : null
+                                                                                    )}
+                                                                                </select>
+                                                                            </div>
+                                                                        </div>
 
-                                                                {criterion.operator !==
-                                                                    'IS NULL' &&
-                                                                    criterion.operator !==
-                                                                        'IS NOT NULL' && (
                                                                         <div
                                                                             className={
-                                                                                styles.joinField
+                                                                                styles.joinGridColumn
                                                                             }
                                                                         >
-                                                                            <label>
-                                                                                Value:
-                                                                            </label>
-                                                                            <input
-                                                                                type="text"
+                                                                            <div
                                                                                 className={
-                                                                                    styles.formControl
+                                                                                    styles.joinField
                                                                                 }
-                                                                                value={
-                                                                                    criterion.value
-                                                                                }
-                                                                                onChange={(
-                                                                                    e
-                                                                                ) =>
-                                                                                    handleFilterCriterionChange(
-                                                                                        index,
-                                                                                        'value',
+                                                                            >
+                                                                                <label>
+                                                                                    Operator:
+                                                                                </label>
+                                                                                <select
+                                                                                    className={
+                                                                                        styles.selectControl
+                                                                                    }
+                                                                                    value={
+                                                                                        criterion.operator
+                                                                                    }
+                                                                                    onChange={(
                                                                                         e
-                                                                                            .target
-                                                                                            .value
-                                                                                    )
-                                                                                }
-                                                                                placeholder="Enter filter value"
-                                                                            />
+                                                                                    ) =>
+                                                                                        handleFilterCriterionChange(
+                                                                                            groupIndex,
+                                                                                            filterIndex,
+                                                                                            'operator',
+                                                                                            e
+                                                                                                .target
+                                                                                                .value
+                                                                                        )
+                                                                                    }
+                                                                                >
+                                                                                    <option value="=">
+                                                                                        Is
+                                                                                        exactly
+                                                                                        equal
+                                                                                        to
+                                                                                    </option>
+                                                                                    <option value="!=">
+                                                                                        Is
+                                                                                        not
+                                                                                        equal
+                                                                                        to
+                                                                                    </option>
+                                                                                    <option value="&gt;">
+                                                                                        Is
+                                                                                        greater
+                                                                                        than
+                                                                                    </option>
+                                                                                    <option value="&lt;">
+                                                                                        Is
+                                                                                        less
+                                                                                        than
+                                                                                    </option>
+                                                                                    <option value="&gt;=">
+                                                                                        Is
+                                                                                        greater
+                                                                                        than
+                                                                                        or
+                                                                                        equal
+                                                                                        to
+                                                                                    </option>
+                                                                                    <option value="&lt;=">
+                                                                                        Is
+                                                                                        less
+                                                                                        than
+                                                                                        or
+                                                                                        equal
+                                                                                        to
+                                                                                    </option>
+                                                                                    <option value="LIKE">
+                                                                                        Contains
+                                                                                    </option>
+                                                                                    <option value="NOT LIKE">
+                                                                                        Does
+                                                                                        not
+                                                                                        contain
+                                                                                    </option>
+                                                                                    <option value="IS NULL">
+                                                                                        Is
+                                                                                        empty
+                                                                                    </option>
+                                                                                    <option value="IS NOT NULL">
+                                                                                        Is
+                                                                                        not
+                                                                                        empty
+                                                                                    </option>
+                                                                                </select>
+                                                                            </div>
+
+                                                                            {criterion.operator !==
+                                                                                'IS NULL' &&
+                                                                                criterion.operator !==
+                                                                                    'IS NOT NULL' && (
+                                                                                    <div
+                                                                                        className={
+                                                                                            styles.joinField
+                                                                                        }
+                                                                                    >
+                                                                                        <label>
+                                                                                            Value:
+                                                                                        </label>
+                                                                                        <input
+                                                                                            type="text"
+                                                                                            className={
+                                                                                                styles.formControl
+                                                                                            }
+                                                                                            value={
+                                                                                                criterion.value
+                                                                                            }
+                                                                                            onChange={(
+                                                                                                e
+                                                                                            ) =>
+                                                                                                handleFilterCriterionChange(
+                                                                                                    groupIndex,
+                                                                                                    filterIndex,
+                                                                                                    'value',
+                                                                                                    e
+                                                                                                        .target
+                                                                                                        .value
+                                                                                                )
+                                                                                            }
+                                                                                            placeholder="Enter filter value"
+                                                                                        />
+                                                                                    </div>
+                                                                                )}
                                                                         </div>
-                                                                    )}
-                                                            </div>
-                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            )
+                                                        )}
                                                     </div>
-                                                )
-                                            )}
-                                        </div>
+                                                ) : (
+                                                    <div
+                                                        className={
+                                                            styles.emptyFilterGroup
+                                                        }
+                                                    >
+                                                        <p>
+                                                            No filters in this
+                                                            group. Click "Add
+                                                            Filter" to add one.
+                                                        </p>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        )
                                     )}
                                 </>
                             )}