@visns-studio/visns-components 5.10.11 → 5.11.1

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

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { saveAs } from 'file-saver';
+import { CloudDownload } from 'akar-icons';
+
+import Download from '../Download';
+import Field from '../Field';
+
+import reportStyles from './styles/ReportForm.module.scss';
+
+const GenericReportForm = ({ config, userProfile, onExport, onFormChange }) => {
+    const [formData, setFormData] = useState({});
+
+    const handleChange = (e) => {
+        const {
+            value,
+            dataset: { name },
+        } = e.target;
+
+        const newFormData = { ...formData, [name]: value };
+        setFormData(newFormData);
+        
+        // Notify parent component of form change
+        if (onFormChange) {
+            onFormChange(newFormData);
+        }
+    };
+
+    const handleChangeDate = (date, id) => {
+        const newFormData = { ...formData, [id]: date };
+        setFormData(newFormData);
+        
+        // Notify parent component of form change
+        if (onFormChange) {
+            onFormChange(newFormData);
+        }
+    };
+
+    const handleChangeSelect = (inputValue, _, id) => {
+        const newFormData = { ...formData, [id]: inputValue };
+        setFormData(newFormData);
+        
+        // Notify parent component of form change
+        if (onFormChange) {
+            onFormChange(newFormData);
+        }
+    };
+
+    const handleExport = async (e) => {
+        try {
+            if (e) {
+                e.preventDefault();
+            }
+
+            // Check if there's a custom export handler
+            if (onExport) {
+                return onExport(formData);
+            }
+
+            // Default export logic
+            const missingFields = config.form.filters
+                .filter(
+                    (item) => item.required === true && formData[item.id] === ''
+                )
+                .map((item) => item.label);
+
+            if (missingFields.length > 0) {
+                const fieldNames = missingFields.join(', ');
+                const errorMessage = `Please fill in a value for the following field(s): ${fieldNames}.`;
+                toast.error(errorMessage);
+            } else {
+                toast.info('Preparing your export...');
+
+                const res = await Download(
+                    config.form.url,
+                    config.form.method,
+                    formData
+                );
+
+                if (res.data.error) {
+                    toast.error(res.data.error);
+                } else {
+                    // Assuming the response contains a Blob or similar data
+                    if (res.data && res.data instanceof Blob) {
+                        const fileName = `${config.form.filename}`;
+                        saveAs(res.data, fileName);
+                        toast.success('Export completed successfully');
+                    } else {
+                        // Handle the case where the response is not a Blob
+                        toast.error('Invalid file format received.');
+                    }
+                }
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('An error occurred during export');
+        }
+    };
+
+    useEffect(() => {
+        if (config.form?.filters) {
+            const tmpForm = config.form.filters.reduce((acc, item) => {
+                acc[item.id] = '';
+                return acc;
+            }, {});
+            setFormData(tmpForm);
+            
+            // Notify parent component of initial form data
+            if (onFormChange) {
+                onFormChange(tmpForm);
+            }
+        }
+    }, [config.form?.filters, onFormChange]);
+
+    // Determine if the form has a title
+    const formTitle = config.form?.title || 'Export Report';
+    const formDescription =
+        config.form?.description || 'Select your export criteria below.';
+
+    // Check if form configuration is valid
+    if (!config.form?.filters) {
+        return (
+            <div className={reportStyles.reportFormContainer}>
+                <div className={reportStyles.reportForm}>
+                    <h2 className={reportStyles.formTitle}>No Report Configuration</h2>
+                    <p className={reportStyles.formDescription}>
+                        Report form configuration is missing.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={reportStyles.reportFormContainer}>
+            <form className={reportStyles.reportForm}>
+                <h2 className={reportStyles.formTitle}>{formTitle}</h2>
+                <p className={reportStyles.formDescription}>
+                    {formDescription}
+                </p>
+
+                {config.form.filters.map((item, key) => (
+                    <div
+                        key={`filter-container-${key}`}
+                        className={`${reportStyles.formField} ${
+                            item.fullWidth ? reportStyles.fullWidthField : ''
+                        }`}
+                    >
+                        <Field
+                            api={userProfile?.settings?.api}
+                            autocompleteCallback={() => {}}
+                            childDropdownCallback={() => {}}
+                            fetchData={() => {}}
+                            formData={formData}
+                            inputClass={''}
+                            inputValue={formData[item.id]}
+                            key={`filter-fields-${key}`}
+                            mapbox={{}}
+                            onChange={handleChange}
+                            onChangeCheckbox={() => {}}
+                            onChangeDate={handleChangeDate}
+                            onChangeNumberFormat={() => {}}
+                            onChangeRicheditor={() => {}}
+                            onChangeSelect={handleChangeSelect}
+                            onChangeToggle={() => {}}
+                            settings={item}
+                            setFormData={setFormData}
+                            style={userProfile?.settings?.style}
+                            uploadProgress={0}
+                            userProfile={userProfile}
+                        />
+                    </div>
+                ))}
+
+                <div className={reportStyles.formActions}>
+                    <button
+                        className={reportStyles.exportButton}
+                        onClick={handleExport}
+                        type="button"
+                    >
+                        <CloudDownload
+                            strokeWidth={2}
+                            size={18}
+                            style={{ marginRight: '8px' }}
+                        />{' '}
+                        Export
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default GenericReportForm;

package/src/components/crm/generic/shared/formatters.js

@@ -0,0 +1,125 @@
+import parse from 'html-react-parser';
+import moment from 'moment';
+import numeral from 'numeral';
+
+/**
+ * Format cell content based on column type or value type
+ * @param {*} value - The value to format
+ * @param {Object} column - Column configuration object
+ * @returns {*} Formatted value
+ */
+export const formatCellContent = (value, column) => {
+    if (value === null || value === undefined) return '';
+    if (value === 0) return '0'; // Explicitly handle zero values
+    if (value === '') return '';
+
+    // Try to infer the type if not provided
+    const valueType = column.type || typeof value;
+
+    switch (valueType) {
+        case 'date':
+            return moment(value).isValid()
+                ? moment(value).format(column.format || 'DD/MM/YYYY')
+                : value;
+        case 'datetime':
+            return moment(value).isValid()
+                ? moment(value).format(column.format || 'DD/MM/YYYY HH:mm')
+                : value;
+        case 'currency':
+            return numeral(value).format(column.format || '$0,0.00');
+        case 'number':
+            // Check if it's actually a number before formatting
+            return !isNaN(parseFloat(value)) && isFinite(value)
+                ? numeral(value).format(column.format || '0,0')
+                : value;
+        case 'boolean':
+            if (
+                value === 1 ||
+                value === true ||
+                value === 'true' ||
+                value === 'yes' ||
+                value === 'Yes'
+            ) {
+                return 'Yes';
+            }
+            if (
+                value === 0 ||
+                value === false ||
+                value === 'false' ||
+                value === 'no' ||
+                value === 'No'
+            ) {
+                return 'No';
+            }
+            return value;
+        case 'year':
+            // Special handling for year values
+            return value.toString();
+        case 'quarter':
+            // Special handling for quarter values (Q1, Q2, etc.)
+            if (value && value.toString().startsWith('Q')) {
+                return value;
+            }
+            return value;
+        case 'html':
+            // Explicitly parse HTML content
+            return parse(String(value));
+        case 'richtext':
+            // Parse rich text content
+            return parse(String(value));
+        default:
+            // For text values, check if it contains HTML tags
+            if (
+                typeof value === 'string' &&
+                (value.includes('<br') ||
+                    value.includes('<p>') ||
+                    value.includes('<div') ||
+                    value.includes('<span'))
+            ) {
+                // Ensure <br /> tags are properly handled
+                const processedValue = String(value)
+                    .replace(/<br \/>/g, '<br>')
+                    .replace(/<br\/>/g, '<br>');
+                return parse(processedValue);
+            }
+            return value;
+    }
+};
+
+/**
+ * Generate year options for dropdown
+ * @param {number} startYear - Starting year
+ * @returns {Array} Array of year options
+ */
+export const generateYearOptions = (startYear) => {
+    const currentYear = new Date().getFullYear();
+    const years = [];
+
+    // Start from the specified year and go up to current year
+    for (let year = startYear; year <= currentYear + 1; year++) {
+        years.push({ value: year.toString(), label: year.toString() });
+    }
+
+    return years;
+};
+
+/**
+ * Apply custom styling from userProfile
+ * @param {Object} userProfile - User profile object
+ * @returns {Object} Custom styles object
+ */
+export const getCustomStyles = (userProfile) => {
+    const customStyles = {};
+
+    if (userProfile?.settings?.style) {
+        const { style } = userProfile.settings;
+
+        if (style.hoverColor) {
+            customStyles.hoverColor = {
+                '--hover-color': style.hoverColor,
+            };
+        }
+    }
+
+    return customStyles;
+};

package/src/components/crm/generic/shared/gridUtils.js

@@ -0,0 +1,194 @@
+/**
+ * Sort data based on column configuration
+ * @param {Array} data - Data array to sort
+ * @param {string} key - Column key to sort by
+ * @param {string} direction - Sort direction ('asc' or 'desc')
+ * @param {Array} gridHeaders - Grid headers configuration
+ * @returns {Array} Sorted data array
+ */
+export const sortData = (data, key, direction, gridHeaders) => {
+    if (!key) return [...data];
+
+    return [...data].sort((a, b) => {
+        // Find the header config for this key to determine type
+        const headerConfig = gridHeaders.find((h) => h.key === key);
+        const type = headerConfig?.type || 'text';
+
+        // Get values, handling null/undefined
+        let aValue = a[key] === null || a[key] === undefined ? '' : a[key];
+        let bValue = b[key] === null || b[key] === undefined ? '' : b[key];
+
+        // Sort based on type
+        switch (type) {
+            case 'number':
+            case 'year':
+                aValue = parseFloat(aValue) || 0;
+                bValue = parseFloat(bValue) || 0;
+                break;
+            case 'date':
+                // Convert to timestamp for comparison
+                aValue = aValue ? new Date(aValue).getTime() : 0;
+                bValue = bValue ? new Date(bValue).getTime() : 0;
+                break;
+            default:
+                // For text, convert to lowercase strings
+                aValue = String(aValue).toLowerCase();
+                bValue = String(bValue).toLowerCase();
+        }
+
+        // Compare values
+        if (aValue < bValue) {
+            return direction === 'asc' ? -1 : 1;
+        }
+        if (aValue > bValue) {
+            return direction === 'asc' ? 1 : -1;
+        }
+        return 0;
+    });
+};
+
+/**
+ * Filter data based on filter values and configuration
+ * @param {Array} data - Data array to filter
+ * @param {Object} filterValues - Filter values object
+ * @param {Array} gridHeaders - Grid headers configuration
+ * @returns {Array} Filtered data array
+ */
+export const filterData = (data, filterValues, gridHeaders) => {
+    // If no filter values are set, return the original data
+    if (Object.keys(filterValues).length === 0) {
+        return data;
+    }
+
+    // Filter the data based on the filter values
+    return data.filter((row) => {
+        // Check each filter
+        return Object.entries(filterValues).every(([key, value]) => {
+            // Skip empty filter values
+            if (!value) return true;
+
+            // Get the row value
+            const rowValue = row[key];
+            if (rowValue === null || rowValue === undefined) return false;
+
+            // Find the header config for this key
+            const headerConfig = gridHeaders.find((h) => h.key === key);
+            if (!headerConfig || !headerConfig.filter) return true;
+
+            const { type, operator } = headerConfig.filter;
+
+            // Apply filter based on type and operator
+            switch (type) {
+                case 'string':
+                    const rowStr = String(rowValue).toLowerCase();
+                    const filterStr = String(value).toLowerCase();
+
+                    switch (operator) {
+                        case 'equals':
+                            return rowStr === filterStr;
+                        case 'contains':
+                            return rowStr.includes(filterStr);
+                        case 'startsWith':
+                            return rowStr.startsWith(filterStr);
+                        case 'endsWith':
+                            return rowStr.endsWith(filterStr);
+                        default:
+                            return rowStr.includes(filterStr);
+                    }
+
+                case 'number':
+                    const rowNum = parseFloat(rowValue);
+                    const filterNum = parseFloat(value);
+
+                    if (isNaN(rowNum) || isNaN(filterNum)) return false;
+
+                    switch (operator) {
+                        case 'equals':
+                            return rowNum === filterNum;
+                        case 'greaterThan':
+                            return rowNum > filterNum;
+                        case 'lessThan':
+                            return rowNum < filterNum;
+                        case 'greaterThanOrEqual':
+                            return rowNum >= filterNum;
+                        case 'lessThanOrEqual':
+                            return rowNum <= filterNum;
+                        default:
+                            return rowNum === filterNum;
+                    }
+
+                case 'date':
+                    const rowDate = new Date(rowValue);
+                    const filterDate = new Date(value);
+
+                    if (isNaN(rowDate.getTime()) || isNaN(filterDate.getTime()))
+                        return false;
+
+                    switch (operator) {
+                        case 'equals':
+                            return (
+                                rowDate.toDateString() ===
+                                filterDate.toDateString()
+                            );
+                        case 'after':
+                            return rowDate > filterDate;
+                        case 'before':
+                            return rowDate < filterDate;
+                        default:
+                            return (
+                                rowDate.toDateString() ===
+                                filterDate.toDateString()
+                            );
+                    }
+
+                default:
+                    return true;
+            }
+        });
+    });
+};
+
+/**
+ * Transform headers from API response to grid headers format
+ * @param {Object} headerData - Header data from API response
+ * @returns {Array} Formatted grid headers array
+ */
+export const transformApiHeaders = (headerData) => {
+    const headerEntries = Object.entries(headerData);
+    return headerEntries.map(([key, config]) => ({
+        key,
+        label: config.label || key,
+        sort: config.sort || key,
+        type: config.type || 'text',
+        filter: config.filter || null,
+        onClick: config.onClick || null,
+    }));
+};
+
+/**
+ * Initialize filter values from grid headers
+ * @param {Array} gridHeaders - Grid headers array
+ * @returns {Object} Initial filter values object
+ */
+export const initializeFilterValues = (gridHeaders) => {
+    const initialFilterValues = {};
+    gridHeaders.forEach((header) => {
+        if (header.filter) {
+            initialFilterValues[header.key] = '';
+        }
+    });
+    return initialFilterValues;
+};
+
+/**
+ * Get sort indicator style based on current sort configuration
+ * @param {string} key - Column key
+ * @param {Object} sortConfig - Current sort configuration
+ * @returns {Object} Style object for sort indicator
+ */
+export const getSortIndicatorStyle = (key, sortConfig) => {
+    if (sortConfig.key !== key) {
+        return { opacity: 0.3 }; // Dim the icon when not sorting by this column
+    }
+    return {}; // Full opacity when sorting by this column
+};