@visns-studio/visns-components 5.0.18 → 5.0.19

package/package.json

@@ -16,6 +16,7 @@
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.7.7",
         "dayjs": "^1.11.13",
+        "fabric": "^6.5.4",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.11.9",
         "html-react-parser": "^5.1.18",
@@ -26,6 +27,7 @@
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "quill-image-uploader": "^1.3.0",
+        "react-big-calendar": "^1.17.1",
         "react-color": "^2.19.3",
         "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
@@ -75,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.0.18",
+    "version": "5.0.19",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Breadcrumb.jsx

@@ -44,7 +44,15 @@ function Breadcrumb({ data, page }) {
                 page &&
                 page.title && (
                     <>
-                        <Link to={page.previousUrl}>{page.title}</Link>
+                        <Link
+                            to={`${page.previousUrl}${
+                                page.previousUrlKey && data[page.previousUrlKey]
+                                    ? '/' + data[page.previousUrlKey]
+                                    : ''
+                            }`}
+                        >
+                            {page.title}
+                        </Link>
                         <CircleChevronRight strokeWidth={2} size={18} />
                     </>
                 )
@@ -53,16 +61,20 @@ function Breadcrumb({ data, page }) {
             {page.titleKey && data && (
                 <>
                     {Array.isArray(page.titleKey) ? (
-                        // If titleKey is an array, iterate and display each nested value
-                        page.titleKey.map((key, index) => (
-                            <span key={index}>
-                                {data[key]}
-                                {index < page.titleKey.length - 1 && ' '}
-                            </span>
-                        ))
+                        <>
+                            {page.titleText && <span>{page.titleText} </span>}
+                            {page.titleKey.map((key, index) => (
+                                <span key={index}>
+                                    {data[key]}
+                                    {index < page.titleKey.length - 1 && ' '}
+                                </span>
+                            ))}
+                        </>
                     ) : (
-                        // If titleKey is a single string, display the corresponding data
-                        <>{data[page.titleKey]}</>
+                        <>
+                            {page.titleText && <span>{page.titleText} </span>}
+                            <span>{data[page.titleKey]}</span>
+                        </>
                     )}
                 </>
             )}

package/src/components/crm/Navigation.jsx

@@ -1,46 +1,13 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
-    ArrowCycle,
-    BookClose,
-    BookOpen,
-    Briefcase,
     Bug,
     Calendar,
-    ChatDots,
-    Clipboard,
-    CloudUpload,
-    DoubleSword,
     Draft,
-    Envelope,
-    File,
-    Folder,
-    FolderAdd,
-    Gear,
-    Grid,
-    Home,
-    HomeAlt1,
-    Inbox,
-    Info,
-    LightBulb,
-    Microphone,
-    Money,
-    Newspaper,
-    Paper,
-    PeopleGroup,
-    PeopleMultiple,
     Person,
-    Question,
-    QuestionFill,
     Search,
-    SettingsVertical,
-    ShippingBoxV1,
     SignOut,
     Shield,
-    StatisticUp,
-    TextAlignLeft,
-    Ticket,
-    Utensils,
 } from 'akar-icons';
 import CustomFetch from './Fetch';
 import Notification from './Notification';

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

@@ -2,6 +2,7 @@ import '../../styles/global.css';
 
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
+import { Calendar, momentLocalizer } from 'react-big-calendar';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
@@ -23,6 +24,7 @@ import {
 } from 'akar-icons';
 
 import 'react-confirm-alert/src/react-confirm-alert.css';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
 
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
@@ -36,6 +38,8 @@ import TableFilter from '../TableFilter';
 
 import styles from './styles/GenericDetail.module.scss';
 
+const localizer = momentLocalizer(moment);
+
 function GenericDetail({
     extraUrlParam,
     layout = 'full',
@@ -712,6 +716,55 @@ function GenericDetail({
 
                 if (activeTabConfig && activeTabConfig.type) {
                     switch (activeTabConfig.type) {
+                        case 'calendar':
+                            const events =
+                                data?.[activeTabConfig?.dataKey]
+                                    ?.map((event) => {
+                                        // Safely access keys using optional chaining and defaults
+                                        const keys =
+                                            activeTabConfig?.config?.keys || {};
+                                        const eventStart = event?.[keys.start]
+                                            ? moment(event[keys.start])
+                                            : null;
+                                        const eventEnd = event?.[keys.end]
+                                            ? moment(event[keys.end])
+                                            : null;
+
+                                        // Only include valid events
+                                        if (eventStart && eventEnd) {
+                                            return {
+                                                title:
+                                                    event?.[keys.title] ||
+                                                    'Untitled Event', // Default title if not provided
+                                                start: eventStart,
+                                                end: eventEnd,
+                                            };
+                                        }
+
+                                        return null; // Filter out invalid events
+                                    })
+                                    ?.filter(Boolean) || [];
+
+                            return (
+                                <Calendar
+                                    localizer={localizer}
+                                    events={events}
+                                    startAccessor="start"
+                                    endAccessor="end"
+                                    style={{
+                                        height:
+                                            activeTabConfig.config.height ||
+                                            500,
+                                    }}
+                                    views={
+                                        activeTabConfig.config.views || [
+                                            'month',
+                                            'week',
+                                            'day',
+                                        ]
+                                    }
+                                />
+                            );
                         case 'dropzone':
                             const downloadFile = (file) => {
                                 const { id, file_url, file_name } = file;