@visns-studio/visns-components 5.4.14 → 5.4.16

package/package.json

@@ -49,7 +49,7 @@
         "react-to-print": "^2.15.1",
         "react-toastify": "^10.0.6",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.28.0",
+        "react-tooltip": "^5.28.1",
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
@@ -58,7 +58,7 @@
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
-        "vite": "^5.4.17",
+        "vite": "^5.4.18",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
@@ -81,7 +81,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.14",
+    "version": "5.4.16",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Breadcrumb.jsx

@@ -15,6 +15,44 @@ function Breadcrumb({ data, page }) {
             : data[keys];
     };
 
+    // Function to evaluate condition for displaying image
+    const evaluateCondition = (condition) => {
+        if (!condition || !Array.isArray(condition) || condition.length === 0) {
+            return false;
+        }
+
+        return condition.every((cond) => {
+            if (!cond.id || !cond.value || !cond.operator || !data[cond.id]) {
+                return false;
+            }
+
+            const fieldValue = data[cond.id];
+            const condValue = cond.value;
+
+            switch (cond.operator) {
+                case 'eq': // equals
+                    return fieldValue === condValue;
+                case 'neq': // not equals
+                    return fieldValue !== condValue;
+                case 'gt': // greater than
+                    return parseFloat(fieldValue) > parseFloat(condValue);
+                case 'gte': // greater than or equal
+                    return parseFloat(fieldValue) >= parseFloat(condValue);
+                case 'lt': // less than
+                    return parseFloat(fieldValue) < parseFloat(condValue);
+                case 'lte': // less than or equal
+                    return parseFloat(fieldValue) <= parseFloat(condValue);
+                default:
+                    return false;
+            }
+        });
+    };
+
+    // Check if image should be displayed based on condition
+    const shouldDisplayImage = page?.image?.condition
+        ? evaluateCondition(page.image.condition)
+        : false;
+
     // Get the nested data for parent title key if it exists
     const nestedData =
         data && page.parentTitleKey
@@ -102,6 +140,21 @@ function Breadcrumb({ data, page }) {
                     )}
                 </>
             )}
+
+            {/* Display image if condition is met */}
+            {shouldDisplayImage && page?.image?.url && (
+                <img
+                    src={page.image.url}
+                    alt="Verification Badge"
+                    style={{
+                        marginLeft: '12px',
+                        height: '30px',
+                        width: 'auto',
+                        verticalAlign: 'middle',
+                        filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))',
+                    }}
+                />
+            )}
         </h1>
     );
 }

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

@@ -37,6 +37,8 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     const [selectedAddWidgetId, setSelectedAddWidgetId] = useState('');
     // Flag used only for triggering reinitialization after widget addition.
     const [widgetAdded, setWidgetAdded] = useState(false);
+    // State to track viewport width
+    const [viewportWidth, setViewportWidth] = useState(window.innerWidth);
 
     // Compute available widgets from original settings that are not yet added.
     const availableWidgets = setting.widgets.filter(
@@ -188,6 +190,21 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         }
     }, [dashboardSetting]);
 
+    // Handle window resize events to update viewportWidth
+    useEffect(() => {
+        const handleResize = () => {
+            setViewportWidth(window.innerWidth);
+        };
+
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+
+        // Clean up event listener on component unmount
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
     const openModal = (widgetId) => {
         setModalContent(widgetId);
         setModalShow(true);
@@ -867,8 +884,28 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 case 'table': {
                     const tableData = widgetData.data || widgetData;
                     const tableKeys = widgetData.keys || [];
+
+                    // Calculate dynamic max-width based on viewport width
+                    const getTableMaxWidth = () => {
+                        // For very small screens (mobile)
+                        if (viewportWidth < 768) {
+                            return '100%';
+                        }
+                        // For medium screens (tablets)
+                        else if (viewportWidth < 1200) {
+                            return Math.min(viewportWidth * 0.9, 1000) + 'px';
+                        }
+                        // For large screens (desktops)
+                        else {
+                            return Math.min(viewportWidth * 0.9, 2560) + 'px';
+                        }
+                    };
+
                     return (
-                        <div className={styles['table-container']}>
+                        <div
+                            className={styles['table-container']}
+                            style={{ maxWidth: getTableMaxWidth() }}
+                        >
                             {tableData.length > 0 ? (
                                 <div className={styles['table-scroll']}>
                                     <table>

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

@@ -387,7 +387,7 @@
     border: 1px solid #dadce0;
     border-radius: 8px;
     overflow: hidden;
-    max-width: 1400px;
+    width: 100%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }