@visns-studio/visns-components 5.4.5 → 5.4.7

package/package.json

@@ -14,9 +14,9 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.8.3",
+        "axios": "^1.8.4",
         "dayjs": "^1.11.13",
-        "fabric": "^6.5.4",
+        "fabric": "^6.6.2",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.18.2",
         "html-react-parser": "^5.2.3",
@@ -27,20 +27,20 @@
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.17.1",
+        "react-big-calendar": "^1.18.0",
         "react-color": "^2.19.3",
         "react-confirm-alert": "^3.0.6",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^7.6.0",
-        "react-dropzone": "^14.3.5",
+        "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
         "react-number-format": "^5.4.3",
         "react-password-strength-bar": "^0.4.1",
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
-        "react-router-dom": "^6.28.2",
-        "react-select": "^5.9.0",
+        "react-router-dom": "^6.30.0",
+        "react-select": "^5.10.1",
         "react-signature-pad-wrapper": "^4.1.0",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
@@ -55,30 +55,30 @@
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
-        "vite": "^5.4.15",
+        "vite": "^5.4.16",
         "yarn": "^1.22.22"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-transform-runtime": "^7.25.9",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-runtime": "^7.26.10",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-react": "^7.26.3",
         "babel-loader": "^9.2.1",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
-        "css-minimizer-webpack-plugin": "^7.0.0",
+        "css-minimizer-webpack-plugin": "^7.0.2",
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.83.4",
-        "sass-loader": "^16.0.4"
+        "sass": "^1.86.2",
+        "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.5",
+    "version": "5.4.7",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -133,6 +133,7 @@ const DataGrid = forwardRef(
             columns,
             form,
             gridHeight,
+            hoverColor,
             mapbox,
             pageData,
             pageSetting,
@@ -2856,6 +2857,7 @@ const DataGrid = forwardRef(
                         : 450
                     : 400,
             boxShadow: 'none',
+            ...(hoverColor ? { '--hover-color': hoverColor } : {}),
         });
         const headerProps = {
             style: style ? style : {},

package/src/components/crm/README_DATAGRID.md

@@ -0,0 +1,70 @@
+# DataGrid Component
+
+## Customizing Hover Color
+
+The DataGrid component now supports customizable hover colors. This allows you to set different hover colors for different instances of the DataGrid.
+
+### Method 1: Using the hoverColor Prop (Recommended)
+
+The simplest way to set a custom hover color is to use the `hoverColor` prop directly:
+
+```jsx
+import DataGrid from './components/crm/DataGrid';
+
+// In your component
+<DataGrid
+    hoverColor="rgb(255, 240, 230)" // Custom hover color
+    // other props...
+/>;
+```
+
+### Method 2: Using CSS Variables in Component Props
+
+You can pass a custom style object to the DataGrid component with the `--hover-color` CSS variable:
+
+```jsx
+import DataGrid from './components/crm/DataGrid';
+
+// Define custom styles with hover color
+const customStyle = {
+    '--hover-color': 'rgb(255, 240, 230)', // Custom hover color
+};
+
+// In your component
+<DataGrid
+    style={customStyle}
+    // other props...
+/>;
+```
+
+### Method 3: Using CSS/SCSS
+
+You can define the `--hover-color` CSS variable in your CSS or SCSS files:
+
+```css
+/* Global default hover color */
+:root {
+    --hover-color: rgb(230, 240, 250);
+}
+
+/* For specific containers */
+.special-grid-container {
+    --hover-color: rgb(255, 240, 230);
+}
+```
+
+Then apply the class to your container:
+
+```jsx
+<div className="special-grid-container">
+    <DataGrid {...props} />
+</div>
+```
+
+### Default Value
+
+If no hover color is specified (via prop or CSS variable), the DataGrid will use a default light blue color (`rgb(230, 240, 250)`).
+
+### Example
+
+See the `src/examples/CustomHoverDataGrid.jsx` file for a complete example of how to implement custom hover colors using all three methods.

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

@@ -1,7 +1,7 @@
 import '../../styles/global.css';
 
 import React, { useEffect, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+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';
@@ -12,6 +12,8 @@ import styles from './styles/Login.module.scss';
 
 const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
     const location = useLocation();
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(false);
 
     const [auth, setAuth] = useState({
         email: '',
@@ -92,6 +94,9 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
         if (e) {
             e.preventDefault();
 
+            setIsLoading(true);
+            toast.info('Logging in...', { autoClose: 2000 });
+
             CustomFetch(
                 '/login/authenticate',
                 'POST',
@@ -103,13 +108,27 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                             : '',
                 },
                 (result) => {
+                    setIsLoading(false);
                     if (result.error === '') {
-                        setUserProfile(result.user);
-
-                        if (result.previous && result.previous !== '') {
-                            window.location.href = result.previous;
+                        // Check if 2FA is required
+                        if (result.requires_2fa) {
+                            // Redirect to 2FA page with user data
+                            navigate('/2fa', {
+                                state: {
+                                    userData: result.user,
+                                    previousUrl:
+                                        location.state?.previousUrl || '',
+                                },
+                            });
                         } else {
-                            setSystemAuth(true);
+                            // Normal login flow
+                            setUserProfile(result.user);
+
+                            if (result.previous && result.previous !== '') {
+                                window.location.href = result.previous;
+                            } else {
+                                setSystemAuth(true);
+                            }
                         }
                     } else {
                         setSystemAuth(false);
@@ -120,11 +139,13 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                         }));
 
                         toast.error(
-                            'Could not log in with the supplied credentials, please try again.'
+                            result.error ||
+                                'Could not log in with the supplied credentials, please try again.'
                         );
                     }
                 },
                 (error) => {
+                    setIsLoading(false);
                     setAuthClass((prevState) => ({
                         ...prevState,
                         username: 'inputError',
@@ -206,8 +227,9 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                     <button
                                         className={styles.btn}
                                         type="submit"
+                                        disabled={isLoading}
                                     >
-                                        Login
+                                        {isLoading ? 'Logging in...' : 'Login'}
                                     </button>
                                 </div>
                                 <div

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

@@ -0,0 +1,184 @@
+import '../../styles/global.css';
+
+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 CustomFetch from '../Fetch';
+
+import styles from './styles/TwoFactorAuth.module.scss';
+
+const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [isLoading, setIsLoading] = useState(false);
+    
+    // Get user data from location state
+    const userData = location.state?.userData || null;
+    const previousUrl = location.state?.previousUrl || '';
+    
+    // If no userData, redirect to login
+    useEffect(() => {
+        if (!userData) {
+            navigate('/login');
+        }
+    }, [userData, navigate]);
+
+    const [verificationCode, setVerificationCode] = useState('');
+    const [codeClass, setCodeClass] = useState('');
+
+    const handleChange = (e) => {
+        if (e) {
+            setVerificationCode(e.target.value);
+            setCodeClass('');
+        }
+    };
+
+    const handleSubmit = (e) => {
+        if (e) {
+            e.preventDefault();
+            
+            if (!verificationCode.trim()) {
+                setCodeClass('inputError');
+                toast.error('Please enter the verification code');
+                return;
+            }
+            
+            setIsLoading(true);
+            toast.info('Verifying code...', { autoClose: 2000 });
+
+            CustomFetch(
+                '/login/verify-2fa',
+                'POST',
+                {
+                    user_id: userData?.id,
+                    verification_code: verificationCode,
+                    previous_url: previousUrl
+                },
+                (result) => {
+                    setIsLoading(false);
+                    if (result.error === '') {
+                        toast.success('Two-factor authentication successful');
+                        setUserProfile(result.user || userData);
+
+                        if (result.previous && result.previous !== '') {
+                            window.location.href = result.previous;
+                        } else {
+                            setSystemAuth(true);
+                            navigate('/');
+                        }
+                    } else {
+                        setCodeClass('inputError');
+                        toast.error(result.error || 'Invalid verification code');
+                    }
+                },
+                (error) => {
+                    setIsLoading(false);
+                    setCodeClass('inputError');
+                    toast.error(String(error) || 'Failed to verify code');
+                }
+            );
+        }
+    };
+
+    const handleResendCode = () => {
+        if (!userData?.id) {
+            toast.error('User information is missing. Please try logging in again.');
+            navigate('/login');
+            return;
+        }
+
+        toast.info('Requesting new verification code...', { autoClose: 2000 });
+        
+        CustomFetch(
+            '/login/resend-2fa',
+            'POST',
+            { user_id: userData.id },
+            (result) => {
+                if (result.error === '') {
+                    toast.success('A new verification code has been sent');
+                } else {
+                    toast.error(result.error || 'Failed to send new code');
+                }
+            },
+            (error) => {
+                toast.error(String(error) || 'Failed to send new code');
+            }
+        );
+    };
+
+    return (
+        <div className={styles.lcontainer}>
+            <div className={styles.lwrap}>
+                <div className={styles.logincontainer}>
+                    <form onSubmit={handleSubmit}>
+                        <Reveal effect="fadeInUp">
+                            <div className={styles.login}>
+                                <img
+                                    src={logo}
+                                    alt="CRM"
+                                    className={styles.loginlogo}
+                                />
+                                <div className={`${styles.formItem} ${styles.fwItem}`}>
+                                    <h2>Two-Factor Authentication</h2>
+                                    <p className={styles.instructions}>
+                                        Please enter the verification code that was sent to your device.
+                                    </p>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem}`}>
+                                    <label className={styles.fi__label}>
+                                        <input
+                                            type="text"
+                                            name="verificationCode"
+                                            value={verificationCode}
+                                            onChange={handleChange}
+                                            tabIndex="1"
+                                            className={codeClass}
+                                            placeholder=" "
+                                            autoComplete="one-time-code"
+                                            maxLength="6"
+                                        />
+                                        <span className={styles.fi__span}>
+                                            Verification Code
+                                        </span>
+                                        <small>
+                                            <LockOff strokeWidth={2} size={18} />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}>
+                                    <button
+                                        className={styles.btn}
+                                        type="submit"
+                                        disabled={isLoading}
+                                    >
+                                        {isLoading ? 'Verifying...' : 'Verify'}
+                                    </button>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}>
+                                    <span>
+                                        Didn't receive a code?{' '}
+                                        <a href="#" onClick={(e) => { e.preventDefault(); handleResendCode(); }}>
+                                            Resend Code
+                                        </a>
+                                    </span>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}>
+                                    <span>
+                                        <a href="#" onClick={(e) => { e.preventDefault(); navigate('/login'); }}>
+                                            Back to Login
+                                        </a>
+                                    </span>
+                                </div>
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TwoFactorAuth;

package/src/components/crm/auth/styles/TwoFactorAuth.module.scss

@@ -0,0 +1,29 @@
+// Import the Login styles to maintain consistency
+@import './Login.module.scss';
+
+// Additional styles specific to the 2FA component
+.instructions {
+    text-align: center;
+    margin: 0.5rem 0 1.5rem;
+    color: var(--paragraph-color);
+    font-size: 0.95rem;
+    line-height: 1.4;
+}
+
+.login {
+    h2 {
+        text-align: center;
+        margin: 0;
+        color: var(--heading-color);
+        font-weight: 500;
+    }
+}
+
+// Style for the verification code input
+.formItem {
+    input[name="verificationCode"] {
+        letter-spacing: 0.25rem;
+        font-size: 1.2rem;
+        text-align: center;
+    }
+}

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

@@ -17,6 +17,7 @@ import GenericMain from './GenericMain';
 import Login from '../auth/Login';
 import Reset from '../auth/Reset';
 import Verify from '../auth/Verify';
+import TwoFactorAuth from '../auth/TwoFactorAuth';
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
@@ -111,6 +112,17 @@ const GenericAuth = ({
                         />
                     }
                 />
+                <Route
+                    path="2fa"
+                    element={
+                        <TwoFactorAuthComponent
+                            loginBg={loginBg}
+                            logo={logo}
+                            setIsAuthenticated={setIsAuthenticated}
+                            setUserProfile={setUserProfile}
+                        />
+                    }
+                />
                 <Route
                     element={
                         <ProtectedRoute
@@ -174,4 +186,15 @@ const VerifyComponent = React.memo(({ loginBg, logo, setIsAuthenticated }) => (
     <Verify loginBg={loginBg} logo={logo} setSystemAuth={setIsAuthenticated} />
 ));
 
+const TwoFactorAuthComponent = React.memo(
+    ({ loginBg, logo, setIsAuthenticated, setUserProfile }) => (
+        <TwoFactorAuth
+            loginBg={loginBg}
+            logo={logo}
+            setSystemAuth={setIsAuthenticated}
+            setUserProfile={setUserProfile}
+        />
+    )
+);
+
 export default GenericAuth;

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

@@ -40,6 +40,7 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
             columns: setting.columns,
             setRowsSelected,
             settings: setting.settings,
+            style: setting.style || {},
             tableSetting,
             type: setting.type ? setting.type : 'table',
         });
@@ -340,6 +341,7 @@ function GenericIndex({
             <Table
                 {...config}
                 ref={gridRef}
+                hoverColor={config.style.hoverColor}
                 gridHeight={windowHeight * 0.65}
                 setConfig={setConfig}
                 setTableData={setTableData}

package/src/components/crm/styles/DataGrid.module.scss

@@ -23,7 +23,7 @@
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {
-        background: rgb(240, 240, 240) !important;
+        background: var(--hover-color, rgb(230, 240, 250)) !important;
         cursor: pointer;
     }
 }
@@ -38,7 +38,7 @@
 
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--primary-color) !important;
-    background: rgb(240, 240, 240) !important;
+    background: var(--hover-color, rgb(230, 240, 250)) !important;
 }
 
 .InovuaReactDataGrid__row:hover {

package/src/components/styles/global.css

@@ -161,7 +161,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {
-        background: rgb(240, 240, 240) !important;
+        background: var(--hover-color, rgb(230, 240, 250)) !important;
         cursor: pointer;
     }
 }
@@ -176,7 +176,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 
 .InovuaReactDataGrid__row-hover-target:hover {
     color: var(--paragraph-color) !important;
-    background: rgb(240, 240, 240) !important;
+    background: var(--hover-color, rgb(230, 240, 250)) !important;
 }
 
 .InovuaReactDataGrid__row:hover {

package/src/examples/CustomHoverDataGrid.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import DataGrid from '../components/crm/DataGrid';
+
+// Example of using custom hover color with DataGrid
+const CustomHoverDataGrid = () => {
+    // Example DataGrid props with direct hoverColor prop
+    const exampleProps = {
+        // Your DataGrid props here
+        hoverColor: 'rgb(255, 240, 230)', // Peachy hover color
+        // Other props...
+    };
+
+    // Define custom styles with hover color (alternative method)
+    const customStyle = {
+        // You can define any CSS variables here
+        '--hover-color': 'rgb(230, 255, 230)', // Light green hover color
+    };
+
+    return (
+        <div>
+            <h2>DataGrid with Custom Hover Color</h2>
+            <p>
+                This example shows how to customize the hover color of the
+                DataGrid.
+            </p>
+
+            <h3>Method 1: Using the hoverColor prop (Recommended)</h3>
+            <div>
+                <DataGrid {...exampleProps} />
+            </div>
+
+            <h3>Method 2: Using CSS Variables in style prop</h3>
+            <div>
+                <DataGrid style={customStyle} />
+            </div>
+
+            <h3>Method 3: Using CSS/SCSS classes</h3>
+            <div className="custom-hover-grid">
+                <DataGrid />
+            </div>
+
+            <h3>How to Use Custom Hover Colors</h3>
+            <p>You can set a custom hover color in three ways:</p>
+            <ol>
+                <li>
+                    <strong>Using the hoverColor prop (Recommended):</strong>
+                    <pre>
+                        {`
+// Direct prop approach
+<DataGrid
+  hoverColor="rgb(255, 240, 230)"
+  {...otherProps}
+/>
+            `}
+                    </pre>
+                </li>
+                <li>
+                    <strong>Using CSS Variables in style prop:</strong>
+                    <pre>
+                        {`
+// Define in your component
+const customStyle = {
+  '--hover-color': 'rgb(230, 255, 230)'
+};
+
+// Apply to DataGrid
+<DataGrid style={customStyle} {...otherProps} />
+            `}
+                    </pre>
+                </li>
+                <li>
+                    <strong>Using CSS/SCSS:</strong>
+                    <pre>
+                        {`
+/* In your CSS/SCSS file */
+:root {
+  --hover-color: rgb(230, 240, 250);
+}
+
+/* For specific containers */
+.custom-hover-grid {
+  --hover-color: rgb(200, 220, 255);
+}
+            `}
+                    </pre>
+                </li>
+            </ol>
+        </div>
+    );
+};
+
+export default CustomHoverDataGrid;