@visns-studio/visns-components 5.11.1 → 5.11.2

package/src/components/crm/DataGrid.jsx

@@ -42,30 +42,31 @@ import { toast } from 'react-toastify';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
-    Alarm,
-    ArrowCounterClockwise,
-    ArrowCycle,
-    Backspace,
+    AlarmClock,
+    RotateCcw,
+    RefreshCw,
+    Trash2,
     BookOpen,
     Check,
-    CircleCheck,
+    CheckCircle,
     Clock,
-    CloudDownload,
+    Download as DownloadIcon,
+    Upload,
     Copy,
     Edit,
-    Envelope,
+    Mail,
     File,
     Folder,
     Image,
     Inbox,
-    LinkOut,
-    LockOn,
+    ExternalLink,
+    Lock,
     Network,
-    Ribbon,
-    ShippingBoxV1,
-    SoundOn,
-    TriangleAlert,
-} from 'akar-icons';
+    Award,
+    Archive,
+    Volume2,
+    AlertTriangle,
+} from 'lucide-react';
 import styles from './styles/DataGrid.module.scss';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
@@ -1710,7 +1711,7 @@ const DataGrid = forwardRef(
                     let IconComponent = null;
 
                     if (icon === 'archive') {
-                        IconComponent = ShippingBoxV1;
+                        IconComponent = Archive;
                     } else if (icon === 'bookOpen') {
                         IconComponent = BookOpen;
                     } else if (icon === 'folder') {
@@ -1720,7 +1721,7 @@ const DataGrid = forwardRef(
                     } else if (icon === 'network') {
                         IconComponent = Network;
                     } else if (icon === 'urgent') {
-                        IconComponent = TriangleAlert;
+                        IconComponent = AlertTriangle;
                     }
 
                     if (IconComponent) {
@@ -2185,15 +2186,15 @@ const DataGrid = forwardRef(
             if (allow) {
                 switch (s.id) {
                     case 'activate':
-                        return getIconComponent(CircleCheck);
+                        return getIconComponent(CheckCircle);
                     case 'archive':
-                        return getIconComponent(ShippingBoxV1);
+                        return getIconComponent(Archive);
                     case 'arrowCycle':
-                        return getIconComponent(ArrowCycle);
+                        return getIconComponent(RefreshCw);
                     case 'cloudUpload':
-                        return getIconComponent(CloudUpload);
+                        return getIconComponent(Upload);
                     case 'oauth2':
-                        return getIconComponent(LockOn);
+                        return getIconComponent(Lock);
                     case 'clone':
                         return getIconComponent(Copy);
                     case 'complete':
@@ -2201,9 +2202,9 @@ const DataGrid = forwardRef(
                     case 'copy':
                         return getIconComponent(Copy);
                     case 'delete':
-                        return getIconComponent(Backspace);
+                        return getIconComponent(Trash2);
                     case 'envelope':
-                        return getIconComponent(Envelope);
+                        return getIconComponent(Mail);
                     case 'family':
                         return getIconComponent(Network);
                     case 'file':
@@ -2213,17 +2214,17 @@ const DataGrid = forwardRef(
                     case 'image':
                         return getIconComponent(Image);
                     case 'link':
-                        return getIconComponent(LinkOut);
+                        return getIconComponent(ExternalLink);
                     case 'primary':
-                        return getIconComponent(Ribbon);
+                        return getIconComponent(Award);
                     case 'restore':
-                        return getIconComponent(ArrowCounterClockwise);
+                        return getIconComponent(RotateCcw);
                     case 'sound':
-                        return getIconComponent(SoundOn);
+                        return getIconComponent(Volume2);
                     case 'ssa':
                         return getIconComponent(Clock);
                     case 'undo':
-                        return getIconComponent(ArrowCounterClockwise);
+                        return getIconComponent(RotateCcw);
                     case 'update':
                         return getIconComponent(Edit);
                     default:
@@ -3078,6 +3079,7 @@ const DataGrid = forwardRef(
                             {...tableSetting}
                             columns={gridColumns}
                             dataSource={dataSource}
+                            defaultFilterValue={filterValue}
                             {...(ajaxSetting && ajaxSetting.groupBy
                                 ? {
                                       defaultGroupBy: ajaxSetting.groupBy,
@@ -3258,13 +3260,13 @@ const DataGrid = forwardRef(
                                                                           case 'clock':
                                                                               return Clock;
                                                                           case 'alarm':
-                                                                              return Alarm;
+                                                                              return AlarmClock;
                                                                           case 'check':
                                                                               return Check;
                                                                           case 'edit':
                                                                               return Edit;
                                                                           case 'envelope':
-                                                                              return Envelope;
+                                                                              return Mail;
                                                                           case 'file':
                                                                               return File;
                                                                           case 'image':
@@ -3272,9 +3274,9 @@ const DataGrid = forwardRef(
                                                                           case 'copy':
                                                                               return Copy;
                                                                           case 'cloudUpload':
-                                                                              return CloudDownload;
+                                                                              return Upload;
                                                                           case 'cloudDownload':
-                                                                              return CloudDownload;
+                                                                              return DownloadIcon;
                                                                           default:
                                                                               return Clock; // Default fallback
                                                                       }

package/src/components/crm/Field.jsx

@@ -15,15 +15,15 @@ import {
     Edit,
     ChevronRight,
     Circle,
-    CircleFill,
+    Dot,
     CirclePlus,
-    CloudDownload,
+    Download,
     Copy,
     Minus,
-    ArrowBack,
-    TrashCan,
-    CircleX,
-} from 'akar-icons';
+    ArrowLeft,
+    Trash2,
+    X,
+} from 'lucide-react';
 import { toast } from 'react-toastify';
 import styles from './styles/Field.module.scss';
 
@@ -835,7 +835,7 @@ function Field({
                                                     );
                                                 }}
                                             >
-                                                <TrashCan
+                                                <Trash2
                                                     strokeWidth={2}
                                                     size={20}
                                                 />
@@ -903,7 +903,7 @@ function Field({
                                             onFileDownload(inputValue);
                                         }}
                                     >
-                                        <CloudDownload size={24} />
+                                        <Download size={24} />
                                     </div>
                                 )}
                         </div>
@@ -2142,7 +2142,7 @@ function Field({
                                 className={styles.modal__close}
                                 onClick={() => setCanvasPopupOpen(false)}
                             >
-                                <CircleX size={24} color="#FFF" />
+                                <X size={24} color="#FFF" />
                             </button>
                         </div>
                         <div
@@ -2157,7 +2157,7 @@ function Field({
                                         }}
                                         className={styles['drawactions--save']}
                                     >
-                                        <CloudDownload size={16} /> Save
+                                        <Download size={16} /> Save
                                     </button>
                                 </li>
                                 <li>
@@ -2218,7 +2218,7 @@ function Field({
                                         onClick={() => sketchRef.current.undo()}
                                         className={styles['drawaction-undo']}
                                     >
-                                        <ArrowBack size={16} /> Undo
+                                        <ArrowLeft size={16} /> Undo
                                     </button>
                                 </li>
                                 <li>
@@ -2228,7 +2228,7 @@ function Field({
                                         }
                                         className={styles['drawactions--clear']}
                                     >
-                                        <TrashCan size={16} /> Clear
+                                        <Trash2 size={16} /> Clear
                                     </button>
                                 </li>
                             </ul>

package/src/components/crm/Form.jsx

@@ -9,7 +9,7 @@ import moment from 'moment';
 import parse from 'html-react-parser';
 import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { CircleX } from 'akar-icons';
+import { X } from 'lucide-react';
 import imageCompression from 'browser-image-compression';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
@@ -2231,7 +2231,7 @@ function Form({
                             className={styles.modal__close}
                             onClick={closeModal}
                         >
-                            <CircleX strokeWidth={2} size={24} />
+                            <X strokeWidth={2} size={24} />
                         </button>
                     </div>
                     <div className={styles.modal__content}>

package/src/components/crm/Navigation.jsx

@@ -3,15 +3,15 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
     Bug,
     Calendar,
-    CreditCardAlt1,
-    Draft,
-    PeopleGroup,
-    Person,
+    CreditCard,
+    FileText,
+    Users,
+    User,
     Search,
-    SignOut,
+    LogOut,
     Shield,
     Image,
-} from 'akar-icons';
+} from 'lucide-react';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
@@ -226,12 +226,12 @@ function Navigation({
         const iconComponents = {
             bug: Bug,
             calendar: Calendar,
-            draft: Draft,
+            draft: FileText,
             image: Image,
-            peopleGroup: PeopleGroup,
-            person: Person,
+            peopleGroup: Users,
+            person: User,
             shield: Shield,
-            signOut: SignOut,
+            signOut: LogOut,
         };
 
         // Check if the setting's URL matches the current page
@@ -256,7 +256,7 @@ function Navigation({
                         onClick={() => setShowBusinessCardOcr(true)}
                         className={activeClass}
                     >
-                        <CreditCardAlt1 size={20} />
+                        <CreditCard size={20} />
                     </button>
                 </li>
             );

package/src/components/crm/Notification.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import { toast } from 'react-toastify';
-import { Bell, CircleX, Check } from 'akar-icons';
+import { Bell, X, Check } from 'lucide-react';
 import CustomFetch from './Fetch';
 import styles from './styles/Notification.module.scss';
 
@@ -351,7 +351,7 @@ function Notification(props) {
                                                 data-index={index}
                                                 aria-label="Dismiss notification"
                                             >
-                                                <CircleX
+                                                <X
                                                     size={18}
                                                     strokeWidth={2}
                                                 />

package/src/components/crm/QuickAction.jsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Popup from 'reactjs-popup';
-import { Search, Cross, Thunder } from 'akar-icons';
+import { Search, X, Zap } from 'lucide-react';
 
 import CustomFetch from './Fetch';
 import Form from './Form';
@@ -307,7 +307,7 @@ const QuickAction = ({ setting }) => {
                     data-tooltip-id="system-tooltip"
                     data-tooltip-content="Quick Actions"
                 >
-                    <Thunder strokeWidth={2} size={18} />
+                    <Zap strokeWidth={2} size={18} />
                 </span>
                 {setting.buttons.map((b) => (
                     <button
@@ -341,7 +341,7 @@ const QuickAction = ({ setting }) => {
                     />
                     <div className={styles.iconContainer}>
                         {search ? (
-                            <Cross
+                            <X
                                 strokeWidth={2}
                                 size={16}
                                 className={styles.searchIcon}

package/src/components/crm/SectionHeader.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChevronRight } from 'akar-icons';
+import { ChevronRight } from 'lucide-react';
 import styles from './styles/Field.module.scss';
 
 /**

package/src/components/crm/SwitchAccount.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ArrowCycle, ChevronVertical } from 'akar-icons';
+import { RotateCcw, ChevronUp } from 'lucide-react';
 import CustomFetch from './Fetch';
 import styles from './styles/SwitchAccount.module.scss';
 
@@ -83,7 +83,7 @@ function SwitchAccount({ setSystemAuth, setting, userProfile }) {
                 data-tooltip-id="system-tooltip"
                 data-tooltip-content={setting.label}
             >
-                <ArrowCycle size={16} verticalAlign="middle" />
+                <RotateCcw size={16} style={{ verticalAlign: 'middle' }} />
             </a>
 
             {show && (
@@ -113,9 +113,9 @@ function SwitchAccount({ setSystemAuth, setting, userProfile }) {
                                         >
                                             Select{' '}
                                             {`${ucfirst(setting.model)} `}
-                                            <ChevronVertical
+                                            <ChevronUp
                                                 size={16}
-                                                fill="#20004d"
+                                                color="#20004d"
                                             />
                                         </span>
                                     )}

package/src/components/crm/auth/ClientLogin.jsx

@@ -3,7 +3,7 @@ import '../../styles/global.css';
 import React, { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Person } from 'akar-icons';
+import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -106,7 +106,7 @@ const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
                             autoComplete="email"
                         />
                         <span className={styles.inputIcon}>
-                            <Person strokeWidth={2} size={18} />
+                            <User strokeWidth={2} size={18} />
                         </span>
                     </div>
 

package/src/components/crm/auth/ClientOTPVerify.jsx

@@ -3,7 +3,7 @@ import '../../styles/global.css';
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { LockOff, ArrowLeft } from 'akar-icons';
+import { Lock, ArrowLeft } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -203,7 +203,7 @@ const ClientOTPVerify = ({
                             maxLength="6"
                         />
                         <span className={styles.inputIcon}>
-                            <LockOff strokeWidth={2} size={18} />
+                            <Lock strokeWidth={2} size={18} />
                         </span>
                     </div>
 

package/src/components/crm/auth/Login.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';
-import { Person, LockOff } from 'akar-icons';
+import { User, Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -201,7 +201,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                             Email
                                         </span>
                                         <small>
-                                            <Person strokeWidth={2} size={18} />
+                                            <User strokeWidth={2} size={18} />
                                         </small>
                                     </label>
                                 </div>
@@ -222,7 +222,7 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                             Password
                                         </span>
                                         <small>
-                                            <LockOff
+                                            <Lock
                                                 strokeWidth={2}
                                                 size={18}
                                             />

package/src/components/crm/auth/Reset.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
-import { Person } from 'akar-icons';
+import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -83,7 +83,7 @@ const Reset = ({ logo }) => {
                                             Email
                                         </span>
                                         <small>
-                                            <Person strokeWidth={2} size={18} />
+                                            <User strokeWidth={2} size={18} />
                                         </small>
                                     </label>
                                 </div>

package/src/components/crm/auth/TwoFactorAuth.jsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';
-import { LockOff } from 'akar-icons';
+import { Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
@@ -290,7 +290,7 @@ const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
                                             Verification Code
                                         </span>
                                         <small>
-                                            <LockOff
+                                            <Lock
                                                 strokeWidth={2}
                                                 size={18}
                                             />