@visns-studio/visns-components 5.4.4 → 5.4.6

package/package.json

@@ -14,9 +14,9 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.8.3",
+        "axios": "^1.8.4",
         "dayjs": "^1.11.13",
-        "fabric": "^6.5.4",
+        "fabric": "^6.6.2",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.18.2",
         "html-react-parser": "^5.2.3",
@@ -27,20 +27,20 @@
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.17.1",
+        "react-big-calendar": "^1.18.0",
         "react-color": "^2.19.3",
         "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^7.6.0",
-        "react-dropzone": "^14.3.5",
+        "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
         "react-number-format": "^5.4.3",
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
-        "react-router-dom": "^6.28.2",
-        "react-select": "^5.9.0",
+        "react-router-dom": "^6.30.0",
+        "react-select": "^5.10.1",
         "react-signature-pad-wrapper": "^4.1.0",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
@@ -55,30 +55,30 @@
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
-        "vite": "^5.4.15",
+        "vite": "^5.4.16",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-transform-runtime": "^7.25.9",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-runtime": "^7.26.10",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-react": "^7.26.3",
         "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
-        "css-minimizer-webpack-plugin": "^7.0.0",
+        "css-minimizer-webpack-plugin": "^7.0.2",
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.83.4",
-        "sass-loader": "^16.0.4"
+        "sass": "^1.86.2",
+        "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.4",
+    "version": "5.4.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -133,6 +133,7 @@ const DataGrid = forwardRef(
             columns,
             form,
             gridHeight,
+            hoverColor,
             mapbox,
             pageData,
             pageSetting,
@@ -2856,6 +2857,7 @@ const DataGrid = forwardRef(
                         : 450
                     : 400,
             boxShadow: 'none',
+            ...(hoverColor ? { '--hover-color': hoverColor } : {}),
         });
         const headerProps = {
             style: style ? style : {},

package/src/components/crm/README_DATAGRID.md

@@ -0,0 +1,70 @@
+# DataGrid Component
+
+## Customizing Hover Color
+
+The DataGrid component now supports customizable hover colors. This allows you to set different hover colors for different instances of the DataGrid.
+
+### Method 1: Using the hoverColor Prop (Recommended)
+
+The simplest way to set a custom hover color is to use the `hoverColor` prop directly:
+
+```jsx
+import DataGrid from './components/crm/DataGrid';
+
+// In your component
+<DataGrid
+    hoverColor="rgb(255, 240, 230)" // Custom hover color
+    // other props...
+/>;
+```
+
+### Method 2: Using CSS Variables in Component Props
+
+You can pass a custom style object to the DataGrid component with the `--hover-color` CSS variable:
+
+```jsx
+import DataGrid from './components/crm/DataGrid';
+
+// Define custom styles with hover color
+const customStyle = {
+    '--hover-color': 'rgb(255, 240, 230)', // Custom hover color
+};
+
+// In your component
+<DataGrid
+    style={customStyle}
+    // other props...
+/>;
+```
+
+### Method 3: Using CSS/SCSS
+
+You can define the `--hover-color` CSS variable in your CSS or SCSS files:
+
+```css
+/* Global default hover color */
+:root {
+    --hover-color: rgb(230, 240, 250);
+}
+
+/* For specific containers */
+.special-grid-container {
+    --hover-color: rgb(255, 240, 230);
+}
+```
+
+Then apply the class to your container:
+
+```jsx
+<div className="special-grid-container">
+    <DataGrid {...props} />
+</div>
+```
+
+### Default Value
+
+If no hover color is specified (via prop or CSS variable), the DataGrid will use a default light blue color (`rgb(230, 240, 250)`).
+
+### Example
+
+See the `src/examples/CustomHoverDataGrid.jsx` file for a complete example of how to implement custom hover colors using all three methods.

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

@@ -23,8 +23,9 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     const swapy = useRef(null);
     const container = useRef(null);
     const navigate = useNavigate();
+    const initialLoadRef = useRef(true); // Ref to track initial load
     const [dashboardSetting, setDashboardSetting] = useState(
-        userProfile.dashboard_setting || setting
+        dynamicDashboard ? userProfile.dashboard_setting || setting : setting
     );
     const [data, setData] = useState({});
     const [dropdowns, setDropdowns] = useState({});
@@ -84,6 +85,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         try {
             const promises = dashboardSetting.widgets.map(async (widget) => {
                 const widgetFilters = appliedFilters[widget.id] || {};
+
                 if (widget.filters) {
                     for (const filter of widget.filters) {
                         if (filter.url) {
@@ -110,12 +112,12 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         }
                     }
                 }
-
                 if (widget.api?.url && widget.api?.method) {
                     const requestParams = {
-                        ...widgetFilters,
                         ...(widget.api.params || {}),
+                        ...widgetFilters,
                     };
+
                     return CustomFetch(
                         widget.api.url,
                         widget.api.method,
@@ -124,11 +126,21 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 }
                 return null;
             });
+
             const results = await Promise.all(promises);
+
             const fetchedData = dashboardSetting.widgets.reduce(
                 (acc, widget, index) => {
                     if (results[index]) {
-                        acc[widget.id] = results[index]?.data;
+                        // Check if the response indicates an error
+                        if (results[index]?.data?.value) {
+                            console.error(
+                                `API error for widget ${widget.id}:`,
+                                results[index].data.value
+                            );
+                        } else {
+                            acc[widget.id] = results[index]?.data;
+                        }
                     }
                     return acc;
                 },
@@ -140,19 +152,41 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         }
     };
 
+    // Single useEffect for initial data fetch
     useEffect(() => {
-        // Check if any widget has a "filters" property.
-        const widgetHasFilters = dashboardSetting?.widgets?.some((widget) =>
-            widget.hasOwnProperty('filters')
-        );
+        // This will run once after filters are initialized
+        if (Object.keys(filters).length > 0 && initialLoadRef.current) {
+            // Fetch data once with initial filters
+            fetchData(filters);
+            // Mark initial load as complete
+            initialLoadRef.current = false;
+        }
+    }, [filters]);
+
+    // Handle filter changes after initial load
+    const isInitialFilterChangeRef = useRef(true);
 
-        // If a widget has filters and our filters object is empty, do nothing.
-        if (widgetHasFilters && Object.keys(filters).length === 0) {
+    useEffect(() => {
+        // Skip the first filter change (which happens during initialization)
+        if (isInitialFilterChangeRef.current) {
+            isInitialFilterChangeRef.current = false;
             return;
         }
 
-        fetchData(filters);
-    }, [filters, dashboardSetting]);
+        // Only fetch data if filters have been initialized
+        if (!initialLoadRef.current && Object.keys(filters).length > 0) {
+            fetchData(filters);
+        }
+    }, [filters]);
+
+    // Handle dashboardSetting changes
+    useEffect(() => {
+        // Skip the initial render
+        if (!initialLoadRef.current) {
+            // Only fetch data if it's not the initial load
+            fetchData(filters);
+        }
+    }, [dashboardSetting]);
 
     const openModal = (widgetId) => {
         setModalContent(widgetId);
@@ -453,10 +487,12 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         <button
                             className={`${styles.btn} ${styles['btn-secondary']}`}
                             onClick={() => {
+                                // Clear filters
                                 setFilters((prevFilters) => ({
                                     ...prevFilters,
                                     [widget.id]: {},
                                 }));
+
                                 fetchData();
                             }}
                         >
@@ -470,11 +506,22 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
 
     const renderWidget = (widget) => {
         const widgetData = data[widget.id] || [];
-        if (
-            widgetData.length > 0 ||
-            widgetData?.data?.length > 0 ||
-            widgetData
-        ) {
+
+        // More detailed check for valid data
+        const hasData =
+            // Array with items
+            (Array.isArray(widgetData) && widgetData.length > 0) ||
+            // Object with data array
+            (widgetData?.data &&
+                Array.isArray(widgetData.data) &&
+                widgetData.data.length > 0) ||
+            // Simple value for counter widgets
+            (widget.type === 'counter' &&
+                widgetData !== null &&
+                widgetData !== undefined);
+
+        if (hasData || widget.type === 'bar') {
+            // Always try to render bar charts for debugging
             switch (widget.type) {
                 case 'counter':
                     return (
@@ -524,8 +571,33 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                     let colors = {};
                     let keys = [];
 
-                    // Handle new data structure (from your first example)
+                    // Handle specific structure with bar.data property
                     if (
+                        widgetData.bar &&
+                        widgetData.bar.data &&
+                        Array.isArray(widgetData.bar.data)
+                    ) {
+                        barData = widgetData.bar.data;
+
+                        // Use the keys from the data
+                        if (widgetData.keys && Array.isArray(widgetData.keys)) {
+                            keys = widgetData.keys;
+                        } else if (barData[0]) {
+                            // Extract keys from the first item, excluding indexBy field (usually 'supervisor')
+                            const indexField =
+                                widget.props.indexBy || 'supervisor';
+                            keys = Object.keys(barData[0] || {}).filter(
+                                (key) => key !== indexField
+                            );
+                        }
+
+                        // Set the indexBy field based on the data structure
+                        if (barData[0] && barData[0].supervisor) {
+                            widget.props.indexBy = 'supervisor';
+                        }
+                    }
+                    // Handle new data structure (from your first example)
+                    else if (
                         widgetData.data &&
                         Array.isArray(widgetData.data) &&
                         widgetData.colors
@@ -533,9 +605,13 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         barData = widgetData.data;
                         colors = widgetData.colors;
                         // Extract keys from the first data item, excluding 'month' or any other index field
-                        keys = Object.keys(barData[0] || {}).filter(
-                            (key) => key !== 'month'
-                        );
+                        if (barData[0]) {
+                            keys = Object.keys(barData[0] || {}).filter(
+                                (key) => key !== 'month'
+                            );
+                        } else {
+                            console.log(`No data items found in barData`);
+                        }
                     }
                     // Handle newer data structure (from your second example)
                     else if (
@@ -545,6 +621,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                     ) {
                         barData = widgetData.data;
                         keys = widgetData.keys;
+
                         // Extract colors from the first data item
                         if (barData[0]) {
                             keys.forEach((key) => {
@@ -555,25 +632,103 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                             });
                         }
                     }
+                    // Handle array of arrays structure
+                    else if (
+                        Array.isArray(widgetData) &&
+                        widgetData.length > 0 &&
+                        Array.isArray(widgetData[0])
+                    ) {
+                        barData = widgetData[0];
+                        // Try to extract keys from the first item
+                        if (barData[0]) {
+                            keys = Object.keys(barData[0] || {}).filter(
+                                (key) => key !== 'month'
+                            );
+                        }
+                    }
                     // Handle legacy data structure
                     else {
                         barData =
                             widgetData.bar?.data ||
                             widgetData.data ||
                             widgetData;
+
+                        // Check if barData is an array of arrays and use the first one
+                        if (
+                            Array.isArray(barData) &&
+                            barData.length > 0 &&
+                            Array.isArray(barData[0])
+                        ) {
+                            barData = barData[0];
+                        }
+
                         if (widgetData.keys) {
-                            keys = widgetData.keys;
+                            keys = Array.isArray(widgetData.keys)
+                                ? widgetData.keys
+                                : [];
+                        } else if (barData && barData[0]) {
+                            // Try to extract keys from the first item
+                            keys = Object.keys(barData[0] || {}).filter(
+                                (key) => key !== 'month'
+                            );
                         }
                     }
 
-                    // Set up colors if they exist
-                    if (Object.keys(colors).length > 0) {
+                    // Always use static colors from props if available
+                    // First check if we have stored original colors
+                    if (
+                        widget.props._originalColors &&
+                        Array.isArray(widget.props._originalColors)
+                    ) {
+                        // Use the stored original colors
+                        const originalColors = widget.props._originalColors;
+
+                        // Create a direct mapping of keys to colors
+                        const colorMap = {};
+                        if (Array.isArray(keys)) {
+                            keys.forEach((key, index) => {
+                                colorMap[key] =
+                                    originalColors[
+                                        index % originalColors.length
+                                    ];
+                            });
+                        }
+                    }
+                    // Otherwise use the colors from the props
+                    else if (
+                        widget.props.colors &&
+                        Array.isArray(widget.props.colors) &&
+                        widget.props.colors.length > 0
+                    ) {
+                        // Store the original colors array
+                        const originalColors = [...widget.props.colors];
+
+                        // Create a direct mapping of keys to colors
+                        const colorMap = {};
+                        if (Array.isArray(keys)) {
+                            keys.forEach((key, index) => {
+                                colorMap[key] =
+                                    originalColors[
+                                        index % originalColors.length
+                                    ];
+                            });
+                        }
+
+                        // Store the original colors array in a separate property
+                        // This ensures it's preserved for future renders
+                        widget.props._originalColors = originalColors;
+                    }
+                    // Fallback to API colors if no static colors in props
+                    else if (Object.keys(colors).length > 0) {
                         widget.props.colors = ({ id }) => colors[id];
                     }
 
                     // Set keys in props if they exist
-                    if (keys.length > 0) {
+                    if (Array.isArray(keys) && keys.length > 0) {
                         widget.props.keys = keys;
+                    } else {
+                        // Set default keys if none are found
+                        widget.props.keys = ['value'];
                     }
 
                     // Handle legend setup
@@ -604,19 +759,60 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         widget.props.tooltip = CustomTooltip;
                     }
 
-                    if (barData?.length > 0) {
+                    // Ensure barData is an array and has items
+                    if (Array.isArray(barData) && barData.length > 0) {
+                        // Make sure we have an indexBy field in each data item
+                        const indexField = widget.props.indexBy || 'month';
+                        const hasIndexField = barData.every(
+                            (item) =>
+                                item &&
+                                typeof item === 'object' &&
+                                indexField in item
+                        );
+
+                        if (!hasIndexField) {
+                            console.warn(
+                                `Bar data items missing required index field '${indexField}'`
+                            );
+                            // Add a default index if missing
+                            barData = barData.map((item, i) => ({
+                                ...item,
+                                [indexField]:
+                                    item[indexField] || `Item ${i + 1}`,
+                            }));
+                        }
+
                         return (
                             <div style={{ height: widget.height || '600px' }}>
                                 <ResponsiveBar
                                     key={`${widget.id}-${widget.size}`}
                                     data={barData}
+                                    indexBy={indexField}
+                                    {...widget.props}
+                                />
+                            </div>
+                        );
+                    } else {
+                        // Create dummy data if no data is available
+                        const dummyData = [
+                            {
+                                month: 'No Data',
+                                value: 0,
+                            },
+                        ];
+
+                        return (
+                            <div style={{ height: widget.height || '600px' }}>
+                                <ResponsiveBar
+                                    key={`${widget.id}-${widget.size}`}
+                                    data={dummyData}
                                     indexBy="month"
+                                    keys={['value']}
                                     {...widget.props}
                                 />
                             </div>
                         );
                     }
-                    break;
                 }
                 case 'line':
                     if (widgetData.length > 0) {

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

@@ -40,6 +40,7 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
             columns: setting.columns,
             setRowsSelected,
             settings: setting.settings,
+            style: setting.style || {},
             tableSetting,
             type: setting.type ? setting.type : 'table',
         });
@@ -340,6 +341,7 @@ function GenericIndex({
             <Table
                 {...config}
                 ref={gridRef}
+                hoverColor={config.style.hoverColor}
                 gridHeight={windowHeight * 0.65}
                 setConfig={setConfig}
                 setTableData={setTableData}

package/src/components/crm/styles/DataGrid.module.scss

@@ -23,7 +23,7 @@
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {
-        background: rgb(240, 240, 240) !important;
+        background: var(--hover-color, rgb(230, 240, 250)) !important;
         cursor: pointer;
     }
 }
@@ -38,7 +38,7 @@
 
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--primary-color) !important;
-    background: rgb(240, 240, 240) !important;
+    background: var(--hover-color, rgb(230, 240, 250)) !important;
 }
 
 .InovuaReactDataGrid__row:hover {

package/src/components/styles/global.css

@@ -161,7 +161,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {
-        background: rgb(240, 240, 240) !important;
+        background: var(--hover-color, rgb(230, 240, 250)) !important;
         cursor: pointer;
     }
 }
@@ -176,7 +176,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--paragraph-color) !important;
-    background: rgb(240, 240, 240) !important;
+    background: var(--hover-color, rgb(230, 240, 250)) !important;
 }
 
 .InovuaReactDataGrid__row:hover {

package/src/examples/CustomHoverDataGrid.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import DataGrid from '../components/crm/DataGrid';
+
+// Example of using custom hover color with DataGrid
+const CustomHoverDataGrid = () => {
+    // Example DataGrid props with direct hoverColor prop
+    const exampleProps = {
+        // Your DataGrid props here
+        hoverColor: 'rgb(255, 240, 230)', // Peachy hover color
+        // Other props...
+    };
+
+    // Define custom styles with hover color (alternative method)
+    const customStyle = {
+        // You can define any CSS variables here
+        '--hover-color': 'rgb(230, 255, 230)', // Light green hover color
+    };
+
+    return (
+        <div>
+            <h2>DataGrid with Custom Hover Color</h2>
+            <p>
+                This example shows how to customize the hover color of the
+                DataGrid.
+            </p>
+
+            <h3>Method 1: Using the hoverColor prop (Recommended)</h3>
+            <div>
+                <DataGrid {...exampleProps} />
+            </div>
+
+            <h3>Method 2: Using CSS Variables in style prop</h3>
+            <div>
+                <DataGrid style={customStyle} />
+            </div>
+
+            <h3>Method 3: Using CSS/SCSS classes</h3>
+            <div className="custom-hover-grid">
+                <DataGrid />
+            </div>
+
+            <h3>How to Use Custom Hover Colors</h3>
+            <p>You can set a custom hover color in three ways:</p>
+            <ol>
+                <li>
+                    <strong>Using the hoverColor prop (Recommended):</strong>
+                    <pre>
+                        {`
+// Direct prop approach
+<DataGrid
+  hoverColor="rgb(255, 240, 230)"
+  {...otherProps}
+/>
+            `}
+                    </pre>
+                </li>
+                <li>
+                    <strong>Using CSS Variables in style prop:</strong>
+                    <pre>
+                        {`
+// Define in your component
+const customStyle = {
+  '--hover-color': 'rgb(230, 255, 230)'
+};
+
+// Apply to DataGrid
+<DataGrid style={customStyle} {...otherProps} />
+            `}
+                    </pre>
+                </li>
+                <li>
+                    <strong>Using CSS/SCSS:</strong>
+                    <pre>
+                        {`
+/* In your CSS/SCSS file */
+:root {
+  --hover-color: rgb(230, 240, 250);
+}
+
+/* For specific containers */
+.custom-hover-grid {
+  --hover-color: rgb(200, 220, 255);
+}
+            `}
+                    </pre>
+                </li>
+            </ol>
+        </div>
+    );
+};
+
+export default CustomHoverDataGrid;