@visns-studio/visns-components 5.6.2 → 5.6.4

package/package.json

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

package/src/components/crm/Download.jsx

@@ -35,28 +35,64 @@ const CustomDownload = (
         }
     }
 
-    options = {
-        method: method,
-        data: formData,
-        headers: headers,
-        url: url,
-        responseType: 'blob',
-    };
-
+    // First make a request to check if the request is valid
     return trackPromise(
         new Promise((resolve, reject) => {
-            axios(options)
+            // First, make a request without responseType: 'blob' to check for errors
+            axios({
+                method: method,
+                data: formData,
+                headers: headers,
+                url: url,
+            })
                 .then((response) => {
-                    if (successCallback) {
-                        successCallback(response.data);
-                    } else {
-                        const error = response.data.error;
+                    // If the response is JSON and contains an error, handle it
+                    if (response.data && response.data.success === false) {
+                        let errorMessage =
+                            response.data.message || 'Unknown error';
+                        if (response.data.error) {
+                            errorMessage += ': ' + response.data.error;
+                        }
 
-                        if (error && error !== '') {
-                            toast.error(<div>{parse(error)}</div>);
+                        if (errorCallback) {
+                            errorCallback(errorMessage);
+                        } else {
+                            toast.error(<div>{parse(errorMessage)}</div>);
                         }
+
+                        // Resolve with the error response
+                        resolve(response);
+                    } else {
+                        // If no error, make the actual blob request
+                        axios({
+                            method: method,
+                            data: formData,
+                            headers: headers,
+                            url: url,
+                            responseType: 'blob',
+                        })
+                            .then((blobResponse) => {
+                                if (successCallback) {
+                                    successCallback(blobResponse.data);
+                                }
+                                resolve(blobResponse);
+                            })
+                            .catch((blobError) => {
+                                let errorMessage =
+                                    blobError.message ||
+                                    'Error downloading file';
+
+                                if (errorCallback) {
+                                    errorCallback(errorMessage);
+                                } else {
+                                    toast.error(
+                                        <div>{parse(errorMessage)}</div>
+                                    );
+                                }
+
+                                reject(blobError);
+                            });
                     }
-                    resolve(response);
                 })
                 .catch((error) => {
                     let errorMessage = '';

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

@@ -177,6 +177,96 @@ const isJsonValue = (value) => {
     return typeof value === 'object' && value !== null;
 };
 
+// Helper function to validate filter criteria
+const validateFilterCriteria = (filterCriteria) => {
+    // If it's already a flat array (legacy format)
+    if (Array.isArray(filterCriteria)) {
+        // Check each filter in the array
+        for (let i = 0; i < filterCriteria.length; i++) {
+            const filter = filterCriteria[i];
+
+            // Skip validation for IS NULL and IS NOT NULL operators which don't need a value
+            if (
+                filter.operator === 'IS NULL' ||
+                filter.operator === 'IS NOT NULL'
+            ) {
+                continue;
+            }
+
+            // Check if any required field is missing
+            if (
+                !filter.table ||
+                !filter.column ||
+                !filter.operator ||
+                filter.value === undefined ||
+                filter.value === null ||
+                filter.value === ''
+            ) {
+                return {
+                    valid: false,
+                    message: `Filter #${
+                        i + 1
+                    } is missing required fields (table, column, operator, or value)`,
+                };
+            }
+        }
+        return { valid: true };
+    }
+
+    // If it's the new structure with groups and operators
+    if (filterCriteria.groups && Array.isArray(filterCriteria.groups)) {
+        // Process each group
+        for (
+            let groupIndex = 0;
+            groupIndex < filterCriteria.groups.length;
+            groupIndex++
+        ) {
+            const group = filterCriteria.groups[groupIndex];
+
+            // Only validate non-empty groups
+            if (group.filters && group.filters.length > 0) {
+                // Check all filters in this group
+                for (
+                    let filterIndex = 0;
+                    filterIndex < group.filters.length;
+                    filterIndex++
+                ) {
+                    const filter = group.filters[filterIndex];
+
+                    // Skip validation for IS NULL and IS NOT NULL operators which don't need a value
+                    if (
+                        filter.operator === 'IS NULL' ||
+                        filter.operator === 'IS NOT NULL'
+                    ) {
+                        continue;
+                    }
+
+                    // Check if any required field is missing
+                    if (
+                        !filter.table ||
+                        !filter.column ||
+                        !filter.operator ||
+                        filter.value === undefined ||
+                        filter.value === null ||
+                        filter.value === ''
+                    ) {
+                        return {
+                            valid: false,
+                            message: `Filter #${filterIndex + 1} in group #${
+                                groupIndex + 1
+                            } is missing required fields (table, column, operator, or value)`,
+                        };
+                    }
+                }
+            }
+        }
+        return { valid: true };
+    }
+
+    // If it's neither a flat array nor the new structure, consider it valid (empty)
+    return { valid: true };
+};
+
 // 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
@@ -474,11 +564,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
@@ -744,9 +840,40 @@ const GenericReport = ({ setting = {} }) => {
         setSelectedColumns(updatedColumns);
     };
 
+    // Start editing a column name
+    const handleStartEditColumn = (index) => {
+        const column = selectedColumns[index];
+        setEditingColumnIndex(index);
+        setEditingColumnName(column.alias || column.displayName);
+    };
+
+    // Save the edited column name
+    const handleSaveColumnName = () => {
+        if (editingColumnIndex !== null) {
+            const updatedColumns = [...selectedColumns];
+            updatedColumns[editingColumnIndex] = {
+                ...updatedColumns[editingColumnIndex],
+                alias: editingColumnName,
+            };
+            setSelectedColumns(updatedColumns);
+            setEditingColumnIndex(null);
+            setEditingColumnName('');
+        }
+    };
+
+    // Cancel column name editing
+    const handleCancelEditColumn = () => {
+        setEditingColumnIndex(null);
+        setEditingColumnName('');
+    };
+
     // State for drag and drop
     const [draggedItemIndex, setDraggedItemIndex] = useState(null);
 
+    // State for column renaming
+    const [editingColumnIndex, setEditingColumnIndex] = useState(null);
+    const [editingColumnName, setEditingColumnName] = useState('');
+
     // Handle drag start for column reordering
     const handleDragStart = (e, index) => {
         setDraggedItemIndex(index);
@@ -1051,6 +1178,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 +1306,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);
     };
 
@@ -1190,7 +1457,7 @@ const GenericReport = ({ setting = {} }) => {
         }
     };
 
-    // Export report as CSV or Excel
+    // Export report as CSV, Excel or PDF
     const handleExportReport = async (format = 'csv') => {
         if (selectedColumns.length === 0) {
             toast.error('Please select at least one column for your report');
@@ -1202,6 +1469,15 @@ const GenericReport = ({ setting = {} }) => {
             return;
         }
 
+        // Validate filter criteria
+        if (filterCriteria) {
+            const validationResult = validateFilterCriteria(filterCriteria);
+            if (!validationResult.valid) {
+                toast.error(validationResult.message);
+                return;
+            }
+        }
+
         setIsLoading(true);
         const toastId = toast.loading(
             `Exporting report as ${format.toUpperCase()}...`
@@ -1222,8 +1498,8 @@ const GenericReport = ({ setting = {} }) => {
                     sourceColumn: join.sourceColumn,
                     targetColumn: join.targetColumn,
                 })),
-                filters: [],
-                sorting: [],
+                filters: flattenFilterCriteria(filterCriteria),
+                sorting: sortCriteria,
             };
 
             // Prepare export request data
@@ -1249,16 +1525,66 @@ const GenericReport = ({ setting = {} }) => {
                 const date = moment().format('YYYYMMDD');
                 const fileName = `${date}_${reportName}.${format}`;
 
-                // Use FileSaver.js to save the file
-                saveAs(res.data, fileName);
+                // For PDF (HTML) format, open in a new window for printing
+                if (format === 'pdf') {
+                    // Convert blob to URL
+                    const blob = new Blob([res.data], { type: 'text/html' });
+                    const url = URL.createObjectURL(blob);
+
+                    // Open in a new window
+                    const printWindow = window.open(url, '_blank');
+
+                    // Add print instructions
+                    if (printWindow) {
+                        printWindow.onload = function () {
+                            // Add print button at the top
+                            const printButton =
+                                printWindow.document.createElement('button');
+                            printButton.innerHTML = 'Print PDF';
+                            printButton.style.position = 'fixed';
+                            printButton.style.top = '10px';
+                            printButton.style.right = '10px';
+                            printButton.style.zIndex = '9999';
+                            printButton.style.padding = '8px 16px';
+                            printButton.style.backgroundColor = '#4CAF50';
+                            printButton.style.color = 'white';
+                            printButton.style.border = 'none';
+                            printButton.style.borderRadius = '4px';
+                            printButton.style.cursor = 'pointer';
+
+                            printButton.onclick = function () {
+                                // Hide the button before printing
+                                this.style.display = 'none';
+                                printWindow.print();
+                                this.style.display = 'block';
+                            };
 
-                toast.update(toastId, {
-                    render: `Report exported successfully as ${format.toUpperCase()}`,
-                    type: 'success',
-                    isLoading: false,
-                    autoClose: 5000,
-                    closeButton: true,
-                });
+                            printWindow.document.body.insertBefore(
+                                printButton,
+                                printWindow.document.body.firstChild
+                            );
+                        };
+                    }
+
+                    toast.update(toastId, {
+                        render: `Report opened in a new window. Use browser's print function to save as PDF.`,
+                        type: 'success',
+                        isLoading: false,
+                        autoClose: 5000,
+                        closeButton: true,
+                    });
+                } else {
+                    // Use FileSaver.js to save the file for CSV and Excel
+                    saveAs(res.data, fileName);
+
+                    toast.update(toastId, {
+                        render: `Report exported successfully as ${format.toUpperCase()}`,
+                        type: 'success',
+                        isLoading: false,
+                        autoClose: 5000,
+                        closeButton: true,
+                    });
+                }
             } else {
                 throw new Error('Invalid response format');
             }
@@ -1520,6 +1846,15 @@ const GenericReport = ({ setting = {} }) => {
             return;
         }
 
+        // Validate filter criteria
+        if (filterCriteria) {
+            const validationResult = validateFilterCriteria(filterCriteria);
+            if (!validationResult.valid) {
+                toast.error(validationResult.message);
+                return;
+            }
+        }
+
         setIsLoading(true);
         toast.info('Executing query...');
 
@@ -1699,6 +2034,15 @@ const GenericReport = ({ setting = {} }) => {
             return;
         }
 
+        // Validate filter criteria
+        if (filterCriteria) {
+            const validationResult = validateFilterCriteria(filterCriteria);
+            if (!validationResult.valid) {
+                toast.error(validationResult.message);
+                return;
+            }
+        }
+
         setIsLoading(true);
 
         try {
@@ -2102,7 +2446,12 @@ const GenericReport = ({ setting = {} }) => {
                                 )}
                             </div>
 
-                            <h3>Selected Columns</h3>
+                            <div className={styles.columnSectionHeader}>
+                                <h3>Selected Columns</h3>
+                                <span className={styles.instructionText}>
+                                    Click the pencil icon (✎) to rename columns
+                                </span>
+                            </div>
                             {selectedColumns.length > 0 ? (
                                 <div className={styles.selectedColumns}>
                                     {selectedColumns.map((column, index) => (
@@ -2130,10 +2479,86 @@ const GenericReport = ({ setting = {} }) => {
                                             >
                                                 ⋮⋮
                                             </div>
-                                            <span>{column.displayName}</span>
+                                            <span>
+                                                {editingColumnIndex ===
+                                                index ? (
+                                                    <div
+                                                        className={
+                                                            styles.inlineEditContainer
+                                                        }
+                                                    >
+                                                        <input
+                                                            type="text"
+                                                            className={
+                                                                styles.columnNameInput
+                                                            }
+                                                            value={
+                                                                editingColumnName
+                                                            }
+                                                            onChange={(e) =>
+                                                                setEditingColumnName(
+                                                                    e.target
+                                                                        .value
+                                                                )
+                                                            }
+                                                            autoFocus
+                                                            onKeyDown={(e) => {
+                                                                if (
+                                                                    e.key ===
+                                                                    'Enter'
+                                                                ) {
+                                                                    handleSaveColumnName();
+                                                                } else if (
+                                                                    e.key ===
+                                                                    'Escape'
+                                                                ) {
+                                                                    handleCancelEditColumn();
+                                                                }
+                                                            }}
+                                                        />
+                                                        <button
+                                                            className={
+                                                                styles.saveBtn
+                                                            }
+                                                            onClick={
+                                                                handleSaveColumnName
+                                                            }
+                                                            title="Save"
+                                                        >
+                                                            ✓
+                                                        </button>
+                                                        <button
+                                                            className={
+                                                                styles.cancelBtn
+                                                            }
+                                                            onClick={
+                                                                handleCancelEditColumn
+                                                            }
+                                                            title="Cancel"
+                                                        >
+                                                            ✕
+                                                        </button>
+                                                    </div>
+                                                ) : (
+                                                    column.alias ||
+                                                    column.displayName
+                                                )}
+                                            </span>
                                             <div
                                                 className={styles.columnActions}
                                             >
+                                                <button
+                                                    className={styles.editBtn}
+                                                    onClick={() =>
+                                                        handleStartEditColumn(
+                                                            index
+                                                        )
+                                                    }
+                                                    aria-label="Edit column name"
+                                                    title="Edit name"
+                                                >
+                                                    ✎
+                                                </button>
                                                 <button
                                                     className={styles.removeBtn}
                                                     onClick={() =>
@@ -3615,31 +4040,218 @@ 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>
@@ -3701,6 +4313,17 @@ const GenericReport = ({ setting = {} }) => {
                             >
                                 Export as Excel
                             </button>
+                            <button
+                                className={`${styles.btn} ${styles.btnSecondary}`}
+                                onClick={() => handleExportReport('pdf')}
+                                disabled={
+                                    isLoading ||
+                                    selectedColumns.length === 0 ||
+                                    !reportName
+                                }
+                            >
+                                Export as PDF
+                            </button>
                             <button
                                 className={`${styles.btn} ${styles.btnPrimary}`}
                                 onClick={handleSaveReport}

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

@@ -911,6 +911,55 @@
         text-overflow: ellipsis;
         white-space: nowrap;
     }
+
+    .inlineEditContainer {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        gap: 4px;
+        width: 100%;
+    }
+
+    .columnNameInput {
+        flex: 1;
+        padding: 4px 8px;
+        border: 1px solid var(--primary-color, #2563eb);
+        border-radius: 4px;
+        font-size: 0.9em;
+        color: var(--paragraph-color, #4b5563);
+        min-width: 50px;
+        max-width: 200px;
+    }
+
+    .saveBtn,
+    .cancelBtn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 2px 4px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        font-size: 0.9em;
+        min-width: 20px;
+        min-height: 20px;
+    }
+
+    .saveBtn {
+        color: var(--success-color, #10b981);
+        &:hover {
+            background: rgba(16, 185, 129, 0.1);
+        }
+    }
+
+    .cancelBtn {
+        color: var(--danger-color, #ef4444);
+        &:hover {
+            background: rgba(239, 68, 68, 0.1);
+        }
+    }
 }
 
 .selectedColumnItem:hover {
@@ -949,6 +998,25 @@
     flex-shrink: 0;
 }
 
+.editBtn {
+    background: none;
+    border: none;
+    color: var(--primary-color, #2563eb);
+    cursor: pointer;
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border-radius: 4px;
+    min-width: 24px;
+    min-height: 24px;
+}
+
+.editBtn:hover {
+    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
+}
+
 .removeBtn {
     background: none;
     border: none;
@@ -1034,6 +1102,25 @@
     margin: 0;
 }
 
+.columnSectionHeader {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.columnSectionHeader h3 {
+    margin: 0;
+    margin-right: 8px;
+}
+
+.instructionText {
+    font-size: 0.8em;
+    color: var(--muted-color, #6b7280);
+    font-style: italic;
+}
+
 .btnSmall {
     padding: 4px 8px;
     font-size: 0.8em;
@@ -1157,6 +1244,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;