@visns-studio/visns-components 5.2.11 → 5.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/src/components/crm/generic/GenericDashboard.jsx +104 -27
  3. package/src/components/crm/generic/styles/GenericDashboard.module.scss +1 -4
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "akar-icons": "^1.9.31",
15
15
  "array-move": "^4.0.0",
16
16
  "awesome-debounce-promise": "^2.1.0",
17
- "axios": "^1.7.9",
17
+ "axios": "^1.8.1",
18
18
  "dayjs": "^1.11.13",
19
19
  "fabric": "^6.5.4",
20
20
  "file-saver": "^2.0.5",
@@ -78,7 +78,7 @@
78
78
  "react-dom": "^17.0.0 || ^18.0.0"
79
79
  },
80
80
  "name": "@visns-studio/visns-components",
81
- "version": "5.2.11",
81
+ "version": "5.2.13",
82
82
  "description": "Various packages to assist in the development of our Custom Applications.",
83
83
  "main": "src/index.js",
84
84
  "files": [
package/src/components/crm/generic/GenericDashboard.jsx CHANGED
@@ -19,7 +19,7 @@ import styles from './styles/GenericDashboard.module.scss';
19
19
 
20
20
  const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();
21
21
 
22
- function GenericDashboard({ setting, userProfile }) {
22
+ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
23
23
  const swapy = useRef(null);
24
24
  const container = useRef(null);
25
25
  const navigate = useNavigate();
@@ -110,6 +110,7 @@ function GenericDashboard({ setting, userProfile }) {
110
110
  }
111
111
  }
112
112
  }
113
+
113
114
  if (widget.api?.url && widget.api?.method) {
114
115
  return CustomFetch(
115
116
  widget.api.url,
@@ -136,8 +137,18 @@ function GenericDashboard({ setting, userProfile }) {
136
137
  };
137
138
 
138
139
  useEffect(() => {
140
+ // Check if any widget has a "filters" property.
141
+ const widgetHasFilters = dashboardSetting?.widgets?.some((widget) =>
142
+ widget.hasOwnProperty('filters')
143
+ );
144
+
145
+ // If a widget has filters and our filters object is empty, do nothing.
146
+ if (widgetHasFilters && Object.keys(filters).length === 0) {
147
+ return;
148
+ }
149
+
139
150
  fetchData(filters);
140
- }, [filters]);
151
+ }, [filters, dashboardSetting]);
141
152
 
142
153
  const openModal = (widgetId) => {
143
154
  setModalContent(widgetId);
@@ -665,6 +676,10 @@ function GenericDashboard({ setting, userProfile }) {
665
676
  type
666
677
  )}`}
667
678
  >
679
+ <td>
680
+ {type ||
681
+ ''}
682
+ </td>
668
683
  {widget.total
669
684
  .column &&
670
685
  tableData.map(
@@ -673,9 +688,18 @@ function GenericDashboard({ setting, userProfile }) {
673
688
  rowIndex
674
689
  ) => {
675
690
  const columnKey =
676
- widget
677
- .axisKeys
678
- .columnKey[0];
691
+ Array.isArray(
692
+ widget
693
+ .axisKeys
694
+ .columnKey
695
+ )
696
+ ? widget
697
+ .axisKeys
698
+ .columnKey[0]
699
+ : widget
700
+ .axisKeys
701
+ .columnKey;
702
+
679
703
  const yAxisKey =
680
704
  widget
681
705
  .axisKeys
@@ -702,6 +726,7 @@ function GenericDashboard({ setting, userProfile }) {
702
726
  : 0;
703
727
  total +=
704
728
  count;
729
+
705
730
  return (
706
731
  <td
707
732
  key={`${toSnakeCase(
@@ -759,6 +784,8 @@ function GenericDashboard({ setting, userProfile }) {
759
784
  <td>
760
785
  <strong>Total</strong>
761
786
  </td>
787
+
788
+ {/* Render each row's total */}
762
789
  {tableData.map(
763
790
  (row, rowIndex) => {
764
791
  const tableTotal =
@@ -774,9 +801,9 @@ function GenericDashboard({ setting, userProfile }) {
774
801
  .columnKey
775
802
  ].find(
776
803
  (
777
- column
804
+ col
778
805
  ) =>
779
- column.form_template_label ===
806
+ col.form_template_label ===
780
807
  type
781
808
  );
782
809
  return (
@@ -792,6 +819,7 @@ function GenericDashboard({ setting, userProfile }) {
792
819
  },
793
820
  0
794
821
  );
822
+
795
823
  return (
796
824
  <td
797
825
  key={`${toSnakeCase(
@@ -811,7 +839,54 @@ function GenericDashboard({ setting, userProfile }) {
811
839
  );
812
840
  }
813
841
  )}
814
- <td />
842
+
843
+ {/* Final cell: grand total of all row totals */}
844
+ <td>
845
+ <strong>
846
+ {tableData.reduce(
847
+ (
848
+ outerSum,
849
+ row
850
+ ) => {
851
+ // sum up each row’s tableTotal again
852
+ return (
853
+ outerSum +
854
+ tableKeys.reduce(
855
+ (
856
+ sum,
857
+ type
858
+ ) => {
859
+ const column =
860
+ row[
861
+ widget
862
+ .axisKeys
863
+ .columnKey
864
+ ].find(
865
+ (
866
+ col
867
+ ) =>
868
+ col.form_template_label ===
869
+ type
870
+ );
871
+ return (
872
+ sum +
873
+ (column
874
+ ? column[
875
+ widget
876
+ .axisKeys
877
+ .yAxis
878
+ ]
879
+ : 0)
880
+ );
881
+ },
882
+ 0
883
+ )
884
+ );
885
+ },
886
+ 0
887
+ )}
888
+ </strong>
889
+ </td>
815
890
  </tr>
816
891
  )}
817
892
  </tbody>
@@ -963,25 +1038,27 @@ function GenericDashboard({ setting, userProfile }) {
963
1038
 
964
1039
  return (
965
1040
  <>
966
- <div className={styles.editButtonContainer}>
967
- {editMode && (
968
- <>
969
- <button
970
- className={styles.btn}
971
- style={{ marginRight: '10px' }}
972
- onClick={() => setShowAddWidgetModal(true)}
973
- >
974
- Add Widget
975
- </button>
976
- </>
977
- )}
978
- <button
979
- className={styles.btn}
980
- onClick={() => setEditMode((prev) => !prev)}
981
- >
982
- {editMode ? 'Done' : 'Edit Dashboard'}
983
- </button>
984
- </div>
1041
+ {dynamicDashboard && (
1042
+ <div className={styles.editButtonContainer}>
1043
+ {editMode && (
1044
+ <>
1045
+ <button
1046
+ className={styles.btn}
1047
+ style={{ marginRight: '10px' }}
1048
+ onClick={() => setShowAddWidgetModal(true)}
1049
+ >
1050
+ Add Widget
1051
+ </button>
1052
+ </>
1053
+ )}
1054
+ <button
1055
+ className={styles.btn}
1056
+ onClick={() => setEditMode((prev) => !prev)}
1057
+ >
1058
+ {editMode ? 'Done' : 'Edit Dashboard'}
1059
+ </button>
1060
+ </div>
1061
+ )}
985
1062
  <div className={styles.grid} ref={container}>
986
1063
  {renderWidgets()}
987
1064
  <Popup open={modalShow} onClose={closeModal}>
package/src/components/crm/generic/styles/GenericDashboard.module.scss CHANGED
@@ -382,15 +382,12 @@
382
382
  display: block;
383
383
  }
384
384
 
385
- .table-scroll table {
386
- min-width: max-content; /* Ensures the table width adapts to its content */
387
- }
388
-
389
385
  .table-container {
390
386
  margin-top: 20px;
391
387
  border: 1px solid #dadce0;
392
388
  border-radius: 8px;
393
389
  overflow: hidden;
390
+ max-width: 1400px;
394
391
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
395
392
  }
396
393