@visns-studio/visns-components 5.0.23 → 5.0.25

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -391,6 +391,7 @@ const DataGrid = forwardRef(
                 case 'envelope':
                 case 'file':
                 case 'image':
+                case 'undo':
                     CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
                         toast.success(result.message);
                     });
@@ -1144,6 +1145,8 @@ const DataGrid = forwardRef(
                         return getIconComponent(SoundOn);
                     case 'ssa':
                         return getIconComponent(Clock);
+                    case 'undo':
+                        return getIconComponent(ArrowCounterClockwise);
                     case 'update':
                         return getIconComponent(Edit);
                     default:

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

@@ -6,13 +6,13 @@ import { ResponsiveBar } from '@nivo/bar';
 import { ResponsiveLine } from '@nivo/line';
 import { ResponsivePie } from '@nivo/pie';
 import Popup from 'reactjs-popup';
+import dayjs from 'dayjs';
 import { CircleX } from 'akar-icons';
 
 import CustomFetch from '../../crm/Fetch';
 import MultiSelect from '../../crm/MultiSelect';
 
 import styles from './styles/GenericDashboard.module.scss';
-import { drop } from 'lodash';
 
 const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();
 
@@ -71,7 +71,7 @@ function GenericDashboard({ setting }) {
     };
 
     useEffect(() => {
-        fetchData(); // Fetch initial data
+        fetchData(filters); // Fetch initial data
     }, [setting]);
 
     const openModal = (widgetId) => {
@@ -124,6 +124,51 @@ function GenericDashboard({ setting }) {
         }
     };
 
+    const getDefaultDate = (defaultValue) => {
+        switch (defaultValue) {
+            case 'startOfMonth':
+                return dayjs().startOf('month').format('YYYY-MM-DD');
+            case 'endOfMonth':
+                return dayjs().endOf('month').format('YYYY-MM-DD');
+            default:
+                return '';
+        }
+    };
+
+    useEffect(() => {
+        // Initialize filters with default values when settings change
+        const initializeFilters = () => {
+            const initialFilters = {};
+
+            setting.widgets.forEach((widget) => {
+                if (widget.filters) {
+                    initialFilters[widget.id] = widget.filters.reduce(
+                        (acc, filter) => {
+                            if (filter.type === 'date' && filter.default) {
+                                acc[filter.id] = getDefaultDate(filter.default);
+                            } else if (filter.type === 'multi-dropdown-ajax') {
+                                acc[filter.id] = [];
+                            }
+                            return acc;
+                        },
+                        {}
+                    );
+                }
+            });
+
+            setFilters(initialFilters);
+        };
+
+        initializeFilters();
+    }, [setting]);
+
+    useEffect(() => {
+        // Fetch data whenever filters are updated
+        if (Object.keys(filters).length > 0) {
+            fetchData(filters);
+        }
+    }, [filters]);
+
     const renderFilters = (widget) => {
         if (!widget.filters || widget.filters.length === 0) return null;
 
@@ -152,13 +197,14 @@ function GenericDashboard({ setting }) {
                                                     filter.id
                                                 ] || ''
                                             }
-                                            onChange={(e) =>
+                                            onChange={(e) => {
                                                 handleFilterChange(
                                                     widget.id,
                                                     filter.id,
                                                     e.target.value
-                                                )
-                                            }
+                                                );
+                                                e.target.blur(); // Closes the picker
+                                            }}
                                         />
                                     </div>
                                 );
@@ -198,14 +244,14 @@ function GenericDashboard({ setting }) {
                         }
                     })}
                     <div className={styles['filter-actions']}>
-                        <button
+                        {/* <button
                             className={`${styles.btn} ${styles['btn-primary']}`}
                             onClick={() => {
                                 fetchData(filters); // Trigger fetchData with the current filters
                             }}
                         >
                             Apply Filters
-                        </button>
+                        </button> */}
                         <button
                             className={`${styles.btn} ${styles['btn-secondary']}`}
                             onClick={() => {