@visns-studio/visns-components 5.6.7 → 5.6.9

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

@@ -7,6 +7,7 @@ import { saveAs } from 'file-saver';
 import _ from 'lodash';
 import parse from 'html-react-parser';
 import moment from 'moment';
+import { CloudDownload } from 'akar-icons';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -15,6 +16,7 @@ import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
 import styles from './styles/GenericIndex.module.scss';
+import reportStyles from './styles/ReportForm.module.scss';
 
 function useWindowHeight() {
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
@@ -33,7 +35,7 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
     const [subnav, setSubnav] = useState(filters || []);
 
     useEffect(() => {
-        setConfig({
+        const newConfig = {
             export: setting.export || {},
             ajaxSetting: setting.ajaxSetting,
             form: setting.form,
@@ -43,28 +45,142 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
             style: setting.style || {},
             tableSetting,
             type: setting.type ? setting.type : 'table',
-        });
+        };
+
+        setConfig(newConfig);
         setSubnav(filters);
     }, [setting, filters, setRowsSelected, tableSetting]);
 
     useEffect(() => {
         if (tabs?.length > 0 && subnav) {
-            const activeTab = subnav.find((s) => s.show);
-            const activeTabConfig = tabs.find((t) => t.id === activeTab?.id);
-
-            if (activeTabConfig) {
-                setConfig((currentConfig) => ({
-                    ...currentConfig,
-                    id: activeTabConfig.id,
-                    ajaxSetting: activeTabConfig.ajaxSetting,
-                    form: activeTabConfig.form,
-                    columns: activeTabConfig.columns,
-                    settings: activeTabConfig.settings,
-                    type: activeTabConfig.type ? activeTabConfig.type : 'table',
-                }));
+            // Find active item (direct or child)
+            const findActiveItem = (items) => {
+                // First check direct items that are not parents
+                const directActive = items.find(
+                    (item) => item.show === true && !item.isParent
+                );
+                if (directActive) {
+                    return { item: directActive, isChild: false };
+                }
+
+                // Then check children of parent items
+                for (const item of items) {
+                    if (
+                        item.isParent &&
+                        item.children &&
+                        item.children.length > 0
+                    ) {
+                        const activeChild = item.children.find(
+                            (child) => child.show === true
+                        );
+                        if (activeChild) {
+                            return {
+                                item: activeChild,
+                                isChild: true,
+                                parent: item,
+                            };
+                        }
+                    }
+                }
+
+                // Finally, check for active parent items
+                const activeParent = items.find(
+                    (item) => item.show === true && item.isParent
+                );
+                if (activeParent) {
+                    // If parent is active but no child is active, activate the first child
+                    if (
+                        activeParent.children &&
+                        activeParent.children.length > 0
+                    ) {
+                        const firstChild = activeParent.children[0];
+                        return {
+                            item: firstChild,
+                            isChild: true,
+                            parent: activeParent,
+                        };
+                    }
+
+                    return { item: activeParent, isChild: false };
+                }
+
+                return null;
+            };
+
+            const activeItemResult = findActiveItem(subnav);
+
+            if (activeItemResult) {
+                const activeItem = activeItemResult.item;
+
+                // Find the tab config for this item
+                const activeTabConfig = tabs.find(
+                    (t) => t.id === activeItem.id
+                );
+
+                if (activeTabConfig) {
+                    // We found a matching tab config, use it
+                    const updatedConfig = {
+                        ...config,
+                        id: activeTabConfig.id,
+                        ajaxSetting: activeTabConfig.ajaxSetting,
+                        form: activeTabConfig.form,
+                        columns: activeTabConfig.columns,
+                        settings: activeTabConfig.settings,
+                        // Preserve the style from the original config or use the tab config's style
+                        style:
+                            config.style ||
+                            activeTabConfig.style ||
+                            setting.style ||
+                            {},
+                        type: activeTabConfig.type
+                            ? activeTabConfig.type
+                            : 'table',
+                    };
+
+                    setConfig(updatedConfig);
+                } else if (activeItemResult.isChild) {
+                    // If this is a child item but we couldn't find a tab config,
+                    // try to use the base config but update the filter
+
+                    // Create a new config based on the base settings
+                    const baseConfig = {
+                        export: setting.export || {},
+                        ajaxSetting: setting.ajaxSetting
+                            ? { ...setting.ajaxSetting }
+                            : undefined,
+                        form: setting.form,
+                        columns: setting.columns,
+                        setRowsSelected,
+                        settings: setting.settings,
+                        // Make sure we have a style property
+                        style: config.style || setting.style || {},
+                        tableSetting,
+                        type: setting.type ? setting.type : 'table',
+                    };
+
+                    // Add the filter for the active child
+                    if (
+                        baseConfig.ajaxSetting &&
+                        baseConfig.ajaxSetting.where
+                    ) {
+                        // Remove any existing filter with this ID
+                        baseConfig.ajaxSetting.where =
+                            baseConfig.ajaxSetting.where.filter(
+                                (w) => w.id !== activeItem.id
+                            );
+
+                        // Add the new filter
+                        baseConfig.ajaxSetting.where.push({
+                            id: activeItem.id,
+                            value: activeItem.value || '',
+                        });
+                    }
+
+                    setConfig(baseConfig);
+                }
             }
         }
-    }, [subnav, tabs]);
+    }, [subnav, tabs, config, setting, setRowsSelected, tableSetting]);
 
     return { config, setConfig, subnav, setSubnav };
 }
@@ -85,7 +201,7 @@ const ReportForm = ({ config, userProfile }) => {
         setFormData((prevData) => ({ ...prevData, [id]: date }));
     };
 
-    const handleChangeSelect = (inputValue, action, id) => {
+    const handleChangeSelect = (inputValue, _, id) => {
         setFormData((prevData) => ({ ...prevData, [id]: inputValue }));
     };
 
@@ -106,6 +222,8 @@ const ReportForm = ({ config, userProfile }) => {
                 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,
@@ -119,6 +237,7 @@ const ReportForm = ({ config, userProfile }) => {
                     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.');
@@ -127,6 +246,7 @@ const ReportForm = ({ config, userProfile }) => {
             }
         } catch (err) {
             console.error(err);
+            toast.error('An error occurred during export');
         }
     };
 
@@ -138,36 +258,63 @@ const ReportForm = ({ config, userProfile }) => {
         setFormData(tmpForm);
     }, [config.form?.filters]);
 
+    // Determine if the form has a title
+    const formTitle = config.form?.title || 'Export Report';
+    const formDescription =
+        config.form?.description || 'Select your export criteria below.';
+
     return (
-        <div className="formcontainer">
-            <form className="modalForm">
+        <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) => (
-                    <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
+                        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="formItem fwItem lastItem">
-                    <button className="btn modalsave" onClick={handleExport}>
+
+                <div className={reportStyles.formActions}>
+                    <button
+                        className={reportStyles.exportButton}
+                        onClick={handleExport}
+                        type="button"
+                    >
+                        <CloudDownload
+                            strokeWidth={2}
+                            size={18}
+                            style={{ marginRight: '8px' }}
+                        />{' '}
                         Export
                     </button>
                 </div>
@@ -184,7 +331,7 @@ function GenericIndex({
     userProfile,
 }) {
     const gridRef = useRef(null);
-    const params = useParams();
+    useParams(); // Using router params if needed in the future
     const [rowsSelected, setRowsSelected] = useState({});
     const [tableData, setTableData] = useState([]);
     const [tableInfo, setTableInfo] = useState({});
@@ -208,12 +355,18 @@ function GenericIndex({
 
     const handleCustomAction = async () => {
         try {
-            const { data, method, message, url } = setting?.functions
-                ?.customAction
+            // Get the custom action configuration
+            const customActionConfig = setting?.functions?.customAction
                 ? setting.functions.customAction
                 : config.form.functions.customAction;
+
+            if (customActionConfig) {
+                // Implementation will be added when needed
+                console.log('Custom action triggered', customActionConfig);
+            }
         } catch (err) {
             console.error(err);
+            toast.error('An error occurred while performing the custom action');
         }
     };
 
@@ -340,55 +493,43 @@ function GenericIndex({
 
     const renderTable = useCallback(() => {
         const isConfigValid = (config) => {
+            // Check if config exists and has the required properties
+            if (!config) return false;
+
             return (
                 config.ajaxSetting &&
                 config.form &&
                 config.columns &&
-                config.settings
+                config.settings !== undefined // Allow empty settings array
             );
         };
 
-        const renderTableComponent = () => (
-            <Table
-                {...config}
-                ref={gridRef}
-                hoverColor={config.style.hoverColor}
-                gridHeight={windowHeight * 0.65}
-                setConfig={setConfig}
-                setTableData={setTableData}
-                setTotal={setTotal}
-                style={userProfile?.settings?.style || {}}
-                userProfile={userProfile}
-            />
-        );
-
-        if (subnav) {
-            // Find the active subnav item with show: true
-            const activeSubnav = subnav.find((item) => item.show === true);
-
-            // Check if the config.id matches the active subnav id
-            if (
-                activeSubnav &&
-                activeSubnav.id === config.id &&
-                isConfigValid(config)
-            ) {
-                return renderTableComponent();
-            }
+        const renderTableComponent = () => {
+            // Ensure config has a style property
+            const configWithStyle = {
+                ...config,
+                style: config.style || userProfile?.settings?.style || {},
+            };
 
-            // Check for active alternative subnav
-            const activeAltSubNav = subnav.find(
-                (item) =>
-                    item.class === 'subactive' || item.class === 'activetab'
+            return (
+                <Table
+                    {...configWithStyle}
+                    ref={gridRef}
+                    hoverColor={configWithStyle.style?.hoverColor}
+                    gridHeight={windowHeight * 0.65}
+                    setConfig={setConfig}
+                    setTableData={setTableData}
+                    setTotal={setTotal}
+                    style={userProfile?.settings?.style || {}}
+                    userProfile={userProfile}
+                />
             );
+        };
 
-            const activeTabExist =
-                config.ajaxSetting?.where?.some(
-                    (w) =>
-                        w.id === activeAltSubNav?.id &&
-                        parseInt(w.value) === parseInt(activeAltSubNav?.value)
-                ) || false;
-
-            if (isConfigValid(config) && activeTabExist) {
+        if (subnav) {
+            // Simply check if the config is valid - we've already set up the config
+            // in the useConfig hook based on the active filter
+            if (isConfigValid(config)) {
                 return renderTableComponent();
             }
         } else if (isConfigValid(config)) {
@@ -409,6 +550,20 @@ function GenericIndex({
         }
     }, [config, renderTable]);
 
+    // Custom handler for filter changes
+    const handleFilterChange = useCallback(
+        (newFilters, newSettings) => {
+            // Update the filters
+            setSubnav(newFilters);
+
+            // Update the settings
+            if (newSettings) {
+                setConfig(newSettings);
+            }
+        },
+        [setSubnav, setConfig]
+    );
+
     const renderContent = useCallback(() => {
         if (subnav?.length > 0) {
             return (
@@ -422,6 +577,7 @@ function GenericIndex({
                                         setFilters={setSubnav}
                                         setSettings={setConfig}
                                         type={layout}
+                                        onFilterChange={handleFilterChange}
                                     />
                                 </div>
                                 <div className={styles.tabcontent__main}>
@@ -443,6 +599,7 @@ function GenericIndex({
                                     setFilters={setSubnav}
                                     setSettings={setConfig}
                                     type={layout}
+                                    onFilterChange={handleFilterChange}
                                 />
                             </div>
                             <div className={styles.grid__subcontent}>
@@ -459,7 +616,7 @@ function GenericIndex({
                 </div>
             );
         }
-    }, [layout, subnav, setSubnav, setConfig, renderTable]);
+    }, [layout, subnav, setSubnav, setConfig, renderTable, handleFilterChange]);
 
     useEffect(() => {
         if (setting.page?.tableInfo?.hasOwnProperty('url')) {

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

@@ -0,0 +1,150 @@
+/* Report Form Styles */
+
+.reportFormContainer {
+    width: 100%;
+    background: var(--item-color, white);
+    border-radius: var(--br, 8px);
+    padding: 24px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+.reportForm {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+.formTitle {
+    grid-column: 1 / -1;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--heading-color, #1f2937);
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+
+.formDescription {
+    grid-column: 1 / -1;
+    font-size: 0.95rem;
+    color: var(--muted-color, #6b7280);
+    margin-bottom: 20px;
+}
+
+.formField {
+    width: 100%;
+    position: relative;
+    margin-bottom: 8px;
+
+    /* Style improvements for form fields */
+    :global(.fi__label) {
+        margin-bottom: 6px;
+        font-weight: 500;
+        color: var(--heading-color, #374151);
+    }
+
+    :global(.react-select__control) {
+        border-color: var(--border-color, #d1d5db);
+        box-shadow: none;
+
+        &:hover {
+            border-color: var(--primary-color, #2563eb);
+        }
+
+        &:focus-within {
+            border-color: var(--primary-color, #2563eb);
+            box-shadow: 0 0 0 1px var(--primary-color, #2563eb);
+        }
+    }
+
+    input,
+    select,
+    textarea {
+        border-radius: var(--br, 6px);
+        border: 1px solid var(--border-color, #d1d5db);
+        padding: 10px 12px;
+        width: 100%;
+        font-size: 0.95rem;
+
+        &:focus {
+            outline: none;
+            border-color: var(--primary-color, #2563eb);
+            box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.1);
+        }
+    }
+}
+
+.fullWidthField {
+    grid-column: 1 / -1;
+}
+
+.formActions {
+    grid-column: 1 / -1;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color, #e5e7eb);
+}
+
+.exportButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 28px;
+    background-color: var(--primary-color, #2563eb);
+    color: white;
+    border: none;
+    border-radius: var(--br, 6px);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    min-width: 140px;
+
+    svg {
+        transition: transform 0.2s ease;
+        vertical-align: middle;
+        position: relative;
+        top: -1px;
+    }
+
+    &:hover {
+        background-color: var(
+            --primary-hover-color,
+            #1d4ed8
+        ); /* Darker shade of primary */
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+        svg {
+            transform: translateY(-1px);
+        }
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.3);
+    }
+
+    &:active {
+        transform: translateY(1px);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .reportForm {
+        grid-template-columns: 1fr;
+    }
+
+    .reportFormContainer {
+        padding: 16px;
+    }
+
+    .formActions {
+        justify-content: center;
+    }
+}