@visns-studio/visns-components 5.0.17 → 5.0.19

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 (5) hide show
  1. package/package.json +3 -1
  2. package/src/components/crm/Breadcrumb.jsx +22 -10
  3. package/src/components/crm/Form.jsx +3 -1
  4. package/src/components/crm/Navigation.jsx +0 -33
  5. package/src/components/crm/generic/GenericDetail.jsx +53 -0
package/package.json CHANGED
@@ -16,6 +16,7 @@
16
16
  "awesome-debounce-promise": "^2.1.0",
17
17
  "axios": "^1.7.7",
18
18
  "dayjs": "^1.11.13",
19
+ "fabric": "^6.5.4",
19
20
  "file-saver": "^2.0.5",
20
21
  "framer-motion": "^11.11.9",
21
22
  "html-react-parser": "^5.1.18",
@@ -26,6 +27,7 @@
26
27
  "numeral": "^2.0.6",
27
28
  "pluralize": "^8.0.0",
28
29
  "quill-image-uploader": "^1.3.0",
30
+ "react-big-calendar": "^1.17.1",
29
31
  "react-color": "^2.19.3",
30
32
  "react-confirm-alert": "^3.0.6",
31
33
  "react-copy-to-clipboard": "^5.1.0",
@@ -75,7 +77,7 @@
75
77
  "react-dom": "^17.0.0 || ^18.0.0"
76
78
  },
77
79
  "name": "@visns-studio/visns-components",
78
- "version": "5.0.17",
80
+ "version": "5.0.19",
79
81
  "description": "Various packages to assist in the development of our Custom Applications.",
80
82
  "main": "src/index.js",
81
83
  "files": [
package/src/components/crm/Breadcrumb.jsx CHANGED
@@ -44,7 +44,15 @@ function Breadcrumb({ data, page }) {
44
44
  page &&
45
45
  page.title && (
46
46
  <>
47
- <Link to={page.previousUrl}>{page.title}</Link>
47
+ <Link
48
+ to={`${page.previousUrl}${
49
+ page.previousUrlKey && data[page.previousUrlKey]
50
+ ? '/' + data[page.previousUrlKey]
51
+ : ''
52
+ }`}
53
+ >
54
+ {page.title}
55
+ </Link>
48
56
  <CircleChevronRight strokeWidth={2} size={18} />
49
57
  </>
50
58
  )
@@ -53,16 +61,20 @@ function Breadcrumb({ data, page }) {
53
61
  {page.titleKey && data && (
54
62
  <>
55
63
  {Array.isArray(page.titleKey) ? (
56
- // If titleKey is an array, iterate and display each nested value
57
- page.titleKey.map((key, index) => (
58
- <span key={index}>
59
- {data[key]}
60
- {index < page.titleKey.length - 1 && ' '}
61
- </span>
62
- ))
64
+ <>
65
+ {page.titleText && <span>{page.titleText} </span>}
66
+ {page.titleKey.map((key, index) => (
67
+ <span key={index}>
68
+ {data[key]}
69
+ {index < page.titleKey.length - 1 && ' '}
70
+ </span>
71
+ ))}
72
+ </>
63
73
  ) : (
64
- // If titleKey is a single string, display the corresponding data
65
- <>{data[page.titleKey]}</>
74
+ <>
75
+ {page.titleText && <span>{page.titleText} </span>}
76
+ <span>{data[page.titleKey]}</span>
77
+ </>
66
78
  )}
67
79
  </>
68
80
  )}
package/src/components/crm/Form.jsx CHANGED
@@ -871,7 +871,9 @@ function Form({
871
871
  _formData[id] =
872
872
  newValue instanceof Date
873
873
  ? newValue
874
- : moment(newValue).toDate();
874
+ : newValue !== undefined
875
+ ? moment(newValue).toDate()
876
+ : '';
875
877
  } else {
876
878
  _formData[id] = newValue;
877
879
  }
package/src/components/crm/Navigation.jsx CHANGED
@@ -1,46 +1,13 @@
1
1
  import React, { useEffect, useRef, useState, useCallback } from 'react';
2
2
  import { Link, useLocation, useNavigate } from 'react-router-dom';
3
3
  import {
4
- ArrowCycle,
5
- BookClose,
6
- BookOpen,
7
- Briefcase,
8
4
  Bug,
9
5
  Calendar,
10
- ChatDots,
11
- Clipboard,
12
- CloudUpload,
13
- DoubleSword,
14
6
  Draft,
15
- Envelope,
16
- File,
17
- Folder,
18
- FolderAdd,
19
- Gear,
20
- Grid,
21
- Home,
22
- HomeAlt1,
23
- Inbox,
24
- Info,
25
- LightBulb,
26
- Microphone,
27
- Money,
28
- Newspaper,
29
- Paper,
30
- PeopleGroup,
31
- PeopleMultiple,
32
7
  Person,
33
- Question,
34
- QuestionFill,
35
8
  Search,
36
- SettingsVertical,
37
- ShippingBoxV1,
38
9
  SignOut,
39
10
  Shield,
40
- StatisticUp,
41
- TextAlignLeft,
42
- Ticket,
43
- Utensils,
44
11
  } from 'akar-icons';
45
12
  import CustomFetch from './Fetch';
46
13
  import Notification from './Notification';
package/src/components/crm/generic/GenericDetail.jsx CHANGED
@@ -2,6 +2,7 @@ import '../../styles/global.css';
2
2
 
3
3
  import React, { useEffect, useRef, useState } from 'react';
4
4
  import { Link, useParams } from 'react-router-dom';
5
+ import { Calendar, momentLocalizer } from 'react-big-calendar';
5
6
  import moment from 'moment';
6
7
  import parse from 'html-react-parser';
7
8
  import Popup from 'reactjs-popup';
@@ -23,6 +24,7 @@ import {
23
24
  } from 'akar-icons';
24
25
 
25
26
  import 'react-confirm-alert/src/react-confirm-alert.css';
27
+ import 'react-big-calendar/lib/css/react-big-calendar.css';
26
28
 
27
29
  import Breadcrumb from '../Breadcrumb';
28
30
  import CustomFetch from '../Fetch';
@@ -36,6 +38,8 @@ import TableFilter from '../TableFilter';
36
38
 
37
39
  import styles from './styles/GenericDetail.module.scss';
38
40
 
41
+ const localizer = momentLocalizer(moment);
42
+
39
43
  function GenericDetail({
40
44
  extraUrlParam,
41
45
  layout = 'full',
@@ -712,6 +716,55 @@ function GenericDetail({
712
716
 
713
717
  if (activeTabConfig && activeTabConfig.type) {
714
718
  switch (activeTabConfig.type) {
719
+ case 'calendar':
720
+ const events =
721
+ data?.[activeTabConfig?.dataKey]
722
+ ?.map((event) => {
723
+ // Safely access keys using optional chaining and defaults
724
+ const keys =
725
+ activeTabConfig?.config?.keys || {};
726
+ const eventStart = event?.[keys.start]
727
+ ? moment(event[keys.start])
728
+ : null;
729
+ const eventEnd = event?.[keys.end]
730
+ ? moment(event[keys.end])
731
+ : null;
732
+
733
+ // Only include valid events
734
+ if (eventStart && eventEnd) {
735
+ return {
736
+ title:
737
+ event?.[keys.title] ||
738
+ 'Untitled Event', // Default title if not provided
739
+ start: eventStart,
740
+ end: eventEnd,
741
+ };
742
+ }
743
+
744
+ return null; // Filter out invalid events
745
+ })
746
+ ?.filter(Boolean) || [];
747
+
748
+ return (
749
+ <Calendar
750
+ localizer={localizer}
751
+ events={events}
752
+ startAccessor="start"
753
+ endAccessor="end"
754
+ style={{
755
+ height:
756
+ activeTabConfig.config.height ||
757
+ 500,
758
+ }}
759
+ views={
760
+ activeTabConfig.config.views || [
761
+ 'month',
762
+ 'week',
763
+ 'day',
764
+ ]
765
+ }
766
+ />
767
+ );
715
768
  case 'dropzone':
716
769
  const downloadFile = (file) => {
717
770
  const { id, file_url, file_name } = file;