@visns-studio/visns-components 5.6.8 → 5.6.10

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/GenericFormBuilder.module.scss

@@ -22,19 +22,19 @@
     &__subrow {
         width: 100%;
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         height: auto;
     }
 
     &__subnav {
-        flex: 1;
+        flex: 0 0 20%;
         background: white;
         border-radius: var(--br);
         box-sizing: border-box;
-        padding: 5px;
-        margin: 8px 0;
+        padding: 8px;
+        margin: 8px 8px 8px 0;
         height: auto;
-        box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.05);
 
         > ul {
             width: 100%;
@@ -114,7 +114,7 @@
     }
 
     &__subcontent {
-        flex: 0 1 85%;
+        flex: 0 1 80%;
         background: white;
         border-radius: var(--br);
         border: 1px solid var(--border-color);
@@ -138,14 +138,14 @@
         display: block;
         background: var(--border-color);
         box-sizing: border-box;
-        padding: 10px 20px;
-        border-top-left-radius: var(--br);
-        border-top-right-radius: var(--br);
+        padding: 10px 15px;
+        border-radius: var(--br);
         margin-bottom: 0;
-        font-weight: 700;
+        font-weight: 600;
         text-align: center;
         color: var(--paragraph-color);
         position: relative;
+        font-size: 0.95rem;
 
         span {
             font-weight: 700;
@@ -257,7 +257,7 @@ input[type='file']:hover {
 }
 
 .formBuilderItem {
-    width: 25%;
+    width: 50%;
     padding: 0.35em;
     position: relative;
     box-sizing: border-box;
@@ -318,7 +318,7 @@ input[type='file']:hover {
 }
 
 .qtrBuilderItem {
-    flex-basis: 25%;
+    flex-basis: 50%;
 }
 
 .halfBuilderItem {
@@ -871,45 +871,73 @@ select:not(:placeholder-shown) + .fi__span {
 .sortableListContainer {
     max-height: 800px; /* Optional for scrollable content */
     overflow-y: auto;
+    padding: 0.75rem;
+    border-radius: var(--br);
+    background-color: rgba(var(--primary-rgb), 0.02);
 }
 
 .dragitem {
     list-style: none;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
-    border-radius: 5px;
+    border-radius: 6px;
     border: 1px solid rgba(var(--primary-rgb), 0.2);
-    box-shadow: 0px 0px 30px rgba(var(--primary-rgb), 0.1);
-    padding: 1.25rem 1.25rem 1.25rem 2rem;
+    box-shadow: 0px 0px 15px rgba(var(--primary-rgb), 0.15);
+    padding: 0.8rem 5rem 0.8rem 2rem;
     box-sizing: border-box;
     cursor: grab;
     list-style: none;
     color: var(--paragraph-color);
+    font-size: 0.9rem;
+    font-weight: 500;
 
-    svg {
+    > svg:first-child {
         width: 100%;
         max-width: 18px;
         position: absolute;
-        left: 5px;
-        top: 5px;
+        left: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--primary-color);
     }
 
-    .edit {
-        width: 100%;
-        max-width: 18px;
+    .actionIcons {
         position: absolute;
-        left: 5px;
-        top: 30px;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        z-index: 10;
+    }
+
+    .edit {
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: var(--secondary-color);
+        }
     }
 
     .delete {
-        width: 100%;
-        max-width: 18px;
-        position: absolute;
-        left: 5px;
-        top: 60px;
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: #d32f2f;
+        }
     }
 
     .sortimg {

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

@@ -124,28 +124,50 @@
     color: var(--paragraph-color);
     font-size: 0.8rem;
 
-    svg {
+    > svg:first-child {
         width: 100%;
         max-width: 16px;
         position: absolute;
         left: 4px;
-        top: 4px;
+        top: 50%;
+        transform: translateY(-50%);
     }
 
-    .pencil-edit {
-        width: 100%;
-        max-width: 16px;
+    .actionIcons {
         position: absolute;
-        left: 4px;
-        top: 24px;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        z-index: 10;
+    }
+
+    .pencil-edit {
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: var(--secondary-color);
+        }
     }
 
     .trash-delete {
-        width: 100%;
-        max-width: 16px;
-        position: absolute;
-        left: 4px;
-        top: 44px;
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: #d32f2f;
+        }
     }
 
     .sortimg {