@visns-studio/visns-components 5.6.1 → 5.6.3

package/package.json

@@ -84,7 +84,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.6.1",
+    "version": "5.6.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/TableFilter.jsx

@@ -9,6 +9,7 @@ function TableFilter({
     type,
 }) {
     const [visibleChildren, setVisibleChildren] = useState(null);
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const isFirstRender = useRef(true);
 
     useEffect(() => {
@@ -116,6 +117,9 @@ function TableFilter({
         if (collapsible && filtertype === 'parent') {
             setVisibleChildren(id);
         }
+
+        // Close mobile menu after selection on small screens
+        setMobileMenuOpen(false);
     };
 
     const renderContent = (d) => {
@@ -184,14 +188,40 @@ function TableFilter({
         }
     };
 
+    const toggleMobileMenu = () => {
+        setMobileMenuOpen(!mobileMenuOpen);
+    };
+
+    // Find active filter for mobile display
+    const activeFilter = filters.find((filter) => filter.show === true);
+    const activeLabel = activeFilter ? activeFilter.label : 'Select Option';
+
     return (
-        <ul className={styles.tableFilter}>
-            {filters.map((item, key) => (
-                <React.Fragment key={'table-filter-' + key}>
-                    {renderContent(item)}
-                </React.Fragment>
-            ))}
-        </ul>
+        <div className={styles.tableFilterContainer}>
+            <div className={styles.mobileToggle} onClick={toggleMobileMenu}>
+                <span className={styles.activeFilterLabel}>{activeLabel}</span>
+                <span
+                    className={`${styles.mobileMenuIcon} ${
+                        mobileMenuOpen ? styles.open : ''
+                    }`}
+                >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </span>
+            </div>
+            <ul
+                className={`${styles.tableFilter} ${
+                    mobileMenuOpen ? styles.mobileOpen : ''
+                }`}
+            >
+                {filters.map((item, key) => (
+                    <React.Fragment key={'table-filter-' + key}>
+                        {renderContent(item)}
+                    </React.Fragment>
+                ))}
+            </ul>
+        </div>
     );
 }
 

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

@@ -474,11 +474,17 @@ const GenericReport = ({ setting = {} }) => {
     const [gridColumns, setGridColumns] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
 
+    // State for JSON field keys
+    const [jsonFieldKeys, setJsonFieldKeys] = useState({});
+    const [loadingJsonKeys, setLoadingJsonKeys] = useState({});
+    const [showJsonKeySelector, setShowJsonKeySelector] = useState({});
+
     // Extract additional settings with defaults
     const {
         reportsUrl = '/ajax/reportBuilder/reports',
         executeUrl = '/ajax/reportBuilder/execute',
         suggestedJoinsUrl = '/ajax/reportBuilder/getSuggestedJoins',
+        jsonFieldKeysUrl = '/ajax/reportBuilder/getJsonFieldKeys',
     } = setting;
 
     // Fetch all database tables and saved reports on component mount
@@ -1051,6 +1057,118 @@ const GenericReport = ({ setting = {} }) => {
         setShowFilteringSection(true);
     };
 
+    // Fetch JSON field keys for a specific table and column
+    const fetchJsonFieldKeys = async (tableName, columnName) => {
+        const cacheKey = `${tableName}.${columnName}`;
+
+        // Check if we're already loading this data
+        if (loadingJsonKeys[cacheKey]) {
+            return;
+        }
+
+        // Check if we already have this data cached
+        if (jsonFieldKeys[cacheKey]) {
+            return;
+        }
+
+        // Set loading state
+        setLoadingJsonKeys((prev) => ({
+            ...prev,
+            [cacheKey]: true,
+        }));
+
+        try {
+            const res = await CustomFetch(jsonFieldKeysUrl, 'POST', {
+                table: tableName,
+                column: columnName,
+                limit: 100, // Analyze up to 100 records
+            });
+
+            if (res.data?.success && res.data?.data?.keys) {
+                // Store the keys in state
+                setJsonFieldKeys((prev) => ({
+                    ...prev,
+                    [cacheKey]: res.data.data.keys,
+                }));
+            } else {
+                console.warn(
+                    `No JSON keys found for ${tableName}.${columnName} or invalid response format`
+                );
+                // Set empty array for this field
+                setJsonFieldKeys((prev) => ({
+                    ...prev,
+                    [cacheKey]: [],
+                }));
+            }
+        } catch (error) {
+            console.error(
+                `Error fetching JSON field keys for ${tableName}.${columnName}:`,
+                error
+            );
+            toast.error(
+                `Failed to load JSON field keys for ${formatName(
+                    tableName
+                )}.${formatName(columnName)}`
+            );
+            // Set empty array for this field on error
+            setJsonFieldKeys((prev) => ({
+                ...prev,
+                [cacheKey]: [],
+            }));
+        } finally {
+            // Update loading state
+            setLoadingJsonKeys((prev) => ({
+                ...prev,
+                [cacheKey]: false,
+            }));
+        }
+    };
+
+    // Check if a column is a JSON type
+    const isJsonColumn = (tableName, columnName) => {
+        // First check the main table
+        if (tableName === selectedTable) {
+            const column = tableColumns.find((col) => col.name === columnName);
+            return (
+                column && column.type && column.type.toLowerCase() === 'json'
+            );
+        }
+
+        // Then check joined tables
+        for (const join of joins) {
+            if (join.targetTable === tableName && join.availableColumns) {
+                const column = join.availableColumns.find(
+                    (col) => col.name === columnName
+                );
+                return (
+                    column &&
+                    column.type &&
+                    column.type.toLowerCase() === 'json'
+                );
+            }
+        }
+
+        return false;
+    };
+
+    // Toggle JSON key selector visibility
+    const toggleJsonKeySelector = (groupIndex, filterIndex) => {
+        const key = `${groupIndex}-${filterIndex}`;
+        setShowJsonKeySelector((prev) => ({
+            ...prev,
+            [key]: !prev[key],
+        }));
+    };
+
+    // Handle JSON key selection
+    const handleJsonKeySelect = (groupIndex, filterIndex, key) => {
+        // Update the filter value with the selected JSON key
+        handleFilterCriterionChange(groupIndex, filterIndex, 'jsonKey', key);
+
+        // Hide the selector
+        toggleJsonKeySelector(groupIndex, filterIndex);
+    };
+
     // Update a filter criterion
     const handleFilterCriterionChange = (
         groupIndex,
@@ -1067,6 +1185,34 @@ const GenericReport = ({ setting = {} }) => {
         updatedFilterCriteria.groups[groupIndex].filters[filterIndex][field] =
             value;
 
+        // If we're changing the table or column, check if it's a JSON field
+        if (field === 'table' || field === 'column') {
+            const filter =
+                updatedFilterCriteria.groups[groupIndex].filters[filterIndex];
+            const tableName = field === 'table' ? value : filter.table;
+            const columnName = field === 'column' ? value : filter.column;
+
+            // If both table and column are set, check if it's a JSON field
+            if (tableName && columnName) {
+                const isJson = isJsonColumn(tableName, columnName);
+
+                // If it's a JSON field, fetch the keys
+                if (isJson) {
+                    fetchJsonFieldKeys(tableName, columnName);
+
+                    // Add a jsonKey field if it doesn't exist
+                    if (!filter.jsonKey) {
+                        filter.jsonKey = '';
+                    }
+                } else {
+                    // If it's not a JSON field, remove the jsonKey field if it exists
+                    if (filter.jsonKey) {
+                        delete filter.jsonKey;
+                    }
+                }
+            }
+        }
+
         setFilterCriteria(updatedFilterCriteria);
     };
 
@@ -3615,31 +3761,217 @@ const GenericReport = ({ setting = {} }) => {
                                                                                             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"
-                                                                                        />
+                                                                                        {/* Check if this is a JSON field */}
+                                                                                        {criterion.table &&
+                                                                                        criterion.column &&
+                                                                                        isJsonColumn(
+                                                                                            criterion.table,
+                                                                                            criterion.column
+                                                                                        ) ? (
+                                                                                            <>
+                                                                                                <label>
+                                                                                                    JSON
+                                                                                                    Path:
+                                                                                                </label>
+                                                                                                <div
+                                                                                                    className={
+                                                                                                        styles.jsonKeyInputContainer
+                                                                                                    }
+                                                                                                >
+                                                                                                    <input
+                                                                                                        type="text"
+                                                                                                        className={
+                                                                                                            styles.formControl
+                                                                                                        }
+                                                                                                        value={
+                                                                                                            criterion.jsonKey ||
+                                                                                                            ''
+                                                                                                        }
+                                                                                                        onChange={(
+                                                                                                            e
+                                                                                                        ) =>
+                                                                                                            handleFilterCriterionChange(
+                                                                                                                groupIndex,
+                                                                                                                filterIndex,
+                                                                                                                'jsonKey',
+                                                                                                                e
+                                                                                                                    .target
+                                                                                                                    .value
+                                                                                                            )
+                                                                                                        }
+                                                                                                        placeholder="Enter JSON path (e.g., data.name)"
+                                                                                                    />
+                                                                                                    <button
+                                                                                                        type="button"
+                                                                                                        className={
+                                                                                                            styles.jsonKeyButton
+                                                                                                        }
+                                                                                                        onClick={() =>
+                                                                                                            toggleJsonKeySelector(
+                                                                                                                groupIndex,
+                                                                                                                filterIndex
+                                                                                                            )
+                                                                                                        }
+                                                                                                        title="Select from available JSON keys"
+                                                                                                    >
+                                                                                                        ▼
+                                                                                                    </button>
+                                                                                                </div>
+
+                                                                                                {/* JSON key selector dropdown */}
+                                                                                                {showJsonKeySelector[
+                                                                                                    `${groupIndex}-${filterIndex}`
+                                                                                                ] && (
+                                                                                                    <div
+                                                                                                        className={
+                                                                                                            styles.jsonKeyDropdown
+                                                                                                        }
+                                                                                                    >
+                                                                                                        {loadingJsonKeys[
+                                                                                                            `${criterion.table}.${criterion.column}`
+                                                                                                        ] ? (
+                                                                                                            <div
+                                                                                                                className={
+                                                                                                                    styles.jsonKeyLoading
+                                                                                                                }
+                                                                                                            >
+                                                                                                                Loading
+                                                                                                                available
+                                                                                                                JSON
+                                                                                                                keys...
+                                                                                                            </div>
+                                                                                                        ) : jsonFieldKeys[
+                                                                                                              `${criterion.table}.${criterion.column}`
+                                                                                                          ]
+                                                                                                              ?.length >
+                                                                                                          0 ? (
+                                                                                                            <div
+                                                                                                                className={
+                                                                                                                    styles.jsonKeyList
+                                                                                                                }
+                                                                                                            >
+                                                                                                                {jsonFieldKeys[
+                                                                                                                    `${criterion.table}.${criterion.column}`
+                                                                                                                ].map(
+                                                                                                                    (
+                                                                                                                        keyInfo,
+                                                                                                                        idx
+                                                                                                                    ) => (
+                                                                                                                        <div
+                                                                                                                            key={
+                                                                                                                                idx
+                                                                                                                            }
+                                                                                                                            className={
+                                                                                                                                styles.jsonKeyItem
+                                                                                                                            }
+                                                                                                                            onClick={() =>
+                                                                                                                                handleJsonKeySelect(
+                                                                                                                                    groupIndex,
+                                                                                                                                    filterIndex,
+                                                                                                                                    keyInfo.key
+                                                                                                                                )
+                                                                                                                            }
+                                                                                                                            title={`Used in ${keyInfo.percentage}% of records. Example: ${keyInfo.example}`}
+                                                                                                                        >
+                                                                                                                            <span
+                                                                                                                                className={
+                                                                                                                                    styles.jsonKeyName
+                                                                                                                                }
+                                                                                                                            >
+                                                                                                                                {
+                                                                                                                                    keyInfo.key
+                                                                                                                                }
+                                                                                                                            </span>
+                                                                                                                            <span
+                                                                                                                                className={
+                                                                                                                                    styles.jsonKeyFrequency
+                                                                                                                                }
+                                                                                                                            >
+                                                                                                                                {
+                                                                                                                                    keyInfo.percentage
+                                                                                                                                }
+                                                                                                                                %
+                                                                                                                            </span>
+                                                                                                                        </div>
+                                                                                                                    )
+                                                                                                                )}
+                                                                                                            </div>
+                                                                                                        ) : (
+                                                                                                            <div
+                                                                                                                className={
+                                                                                                                    styles.jsonKeyEmpty
+                                                                                                                }
+                                                                                                            >
+                                                                                                                No
+                                                                                                                JSON
+                                                                                                                keys
+                                                                                                                found.
+                                                                                                                Enter
+                                                                                                                a
+                                                                                                                path
+                                                                                                                manually.
+                                                                                                            </div>
+                                                                                                        )}
+                                                                                                    </div>
+                                                                                                )}
+
+                                                                                                <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"
+                                                                                                />
+                                                                                            </>
+                                                                                        ) : (
+                                                                                            <>
+                                                                                                <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>

package/src/components/crm/generic/styles/GenericReport.module.scss

@@ -1157,6 +1157,94 @@
     margin: 16px 0;
 }
 
+.jsonKeyInputContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .jsonKeyButton {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        background: none;
+        border: none;
+        border-left: 1px solid var(--border-color, #d1d5db);
+        padding: 0 10px;
+        color: var(--paragraph-color, #4b5563);
+        cursor: pointer;
+        font-size: 0.8em;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background-color: #f3f4f6;
+            color: var(--primary-color, #2563eb);
+        }
+    }
+
+    input {
+        padding-right: 30px;
+    }
+}
+
+.jsonKeyDropdown {
+    position: relative;
+    width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: white;
+    border: 1px solid var(--border-color, #d1d5db);
+    border-radius: 6px;
+    margin-top: 4px;
+    margin-bottom: 12px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    z-index: 100;
+}
+
+.jsonKeyList {
+    padding: 4px 0;
+}
+
+.jsonKeyItem {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.85em;
+
+    &:hover {
+        background-color: #f3f4f6;
+    }
+
+    .jsonKeyName {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--primary-color, #2563eb);
+        font-weight: 500;
+    }
+
+    .jsonKeyFrequency {
+        color: var(--muted-color, #6b7280);
+        font-size: 0.85em;
+        margin-left: 8px;
+    }
+}
+
+.jsonKeyLoading,
+.jsonKeyEmpty {
+    padding: 12px;
+    text-align: center;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.85em;
+    font-style: italic;
+}
+
 .jsonPreview {
     max-width: 100%;
     max-height: 150px;

package/src/components/crm/styles/TableFilter.module.scss

@@ -1,8 +1,15 @@
+.tableFilterContainer {
+    width: 100%;
+    position: relative;
+    display: block;
+}
+
 .tableFilter {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 1rem;
+    width: 100%;
 }
 
 .collapsibleMenu {
@@ -51,3 +58,81 @@
     background: var(--item-color) !important;
     color: var(--paragraph-color) !important;
 }
+
+/* Mobile menu toggle button */
+.mobileToggle {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 15px;
+    background: var(--primary-color, #0b3b2e);
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 10px;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.activeFilterLabel {
+    font-weight: 600;
+    color: white;
+}
+
+.mobileMenuIcon {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 20px;
+    height: 14px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.mobileMenuIcon span {
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: white;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.mobileMenuIcon.open span:nth-child(1) {
+    transform: translateY(6px) rotate(45deg);
+}
+
+.mobileMenuIcon.open span:nth-child(2) {
+    opacity: 0;
+}
+
+.mobileMenuIcon.open span:nth-child(3) {
+    transform: translateY(-6px) rotate(-45deg);
+}
+
+/* Media queries for responsive design */
+@media (max-width: 1024px) {
+    .mobileToggle {
+        display: flex;
+    }
+
+    .tableFilter {
+        display: none;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+
+    .tableFilter.mobileOpen {
+        display: block;
+        max-height: 1000px;
+        overflow-y: auto;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        margin-bottom: 10px;
+    }
+
+    .link {
+        padding: 12px 20px; /* Larger touch targets for mobile */
+    }
+}