@visns-studio/visns-components 5.1.16 → 5.1.17

package/package.json

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

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

@@ -70,10 +70,6 @@ function GenericDashboard({ setting }) {
         }
     };
 
-    // useEffect(() => {
-    //     fetchData(filters); // Fetch initial data
-    // }, [setting]);
-
     const openModal = (widgetId) => {
         setModalContent(widgetId);
         setModalShow(true);
@@ -163,10 +159,7 @@ function GenericDashboard({ setting }) {
     }, [setting]);
 
     useEffect(() => {
-        // Fetch data whenever filters are updated
-        if (Object.keys(filters).length > 0) {
-            fetchData(filters);
-        }
+        fetchData(filters);
     }, [filters]);
 
     const renderFilters = (widget) => {
@@ -266,8 +259,34 @@ function GenericDashboard({ setting }) {
     const renderWidget = (widget) => {
         const widgetData = data[widget.id] || [];
 
-        if (widgetData.length > 0 || widgetData?.data?.length > 0) {
+        if (
+            widgetData.length > 0 ||
+            widgetData?.data?.length > 0 ||
+            widgetData
+        ) {
             switch (widget.type) {
+                case 'counter':
+                    return (
+                        <>
+                            <div className={styles.widgetNo}>
+                                <span>0</span>
+                            </div>
+                            <div className={styles.widgetLink}>
+                                <button
+                                    className={
+                                        widget.highlight
+                                            ? styles['btn-alt']
+                                            : styles.btn
+                                    }
+                                    onClick={() => {
+                                        navigate('/leads/follow-ups');
+                                    }}
+                                >
+                                    View All
+                                </button>
+                            </div>
+                        </>
+                    );
                 case 'pie':
                     return (
                         <ResponsivePie data={widgetData} {...widget.props} />
@@ -332,8 +351,6 @@ function GenericDashboard({ setting }) {
                     const tableData = widgetData.data || widgetData;
                     const tableKeys = widgetData.keys || [];
 
-                    console.info(tableKeys);
-
                     return (
                         <div className={styles['table-container']}>
                             {tableData.length > 0 ? (

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

@@ -170,8 +170,20 @@
 }
 
 .dashwidget--highlight {
-    background: var(--secondary-color) !important;
-    border-bottom: 2px solid rgba(var(--secondary-rgb), 0.85) !important;
+    background: var(--primary-color) !important;
+    border-top: 1px solid transparent !important;
+    border-left: 1px solid transparent !important;
+    border-right: 1px solid transparent !important;
+    border-bottom: 2px solid rgba(var(--primary-rgb), 0.9) !important;
+
+    h2 {
+        color: var(--tertiary-color) !important;
+    }
+
+    .widgetTitle {
+        padding-bottom: 10px;
+        border-bottom: 2px solid rgba(var(--tertiary-rgb), 0.5);
+    }
 }
 
 .widgetNo {
@@ -200,12 +212,31 @@
         display: block;
         padding: 0.25em 3em;
         background: none;
+        border-color: rgba(var(--tertiary-color-rgb), 0.05);
 
         &:hover {
             background: none;
             color: var(--tertiary-color);
         }
     }
+
+    .btn-alt {
+        width: max-content;
+        margin: 0 auto;
+        display: block;
+        padding: 0.25em 3em;
+        background: #00294a;
+        border-color: rgba(var(--tertiary-color-rgb), 0.05);
+        color: #fff;
+        border-radius: 5px;
+
+        &:hover {
+            background: #00294a;
+            color: var(--tertiary-color);
+            border-color: rgba(var(--tertiary-color-rgb), 0.5);
+            color: #fff;
+        }
+    }
 }
 
 .filter-container {