@visns-studio/visns-components 5.6.6 → 5.6.8

package/README.md

@@ -59,6 +59,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **Notification Pages** - User notification center
 -   **Sorting Pages** - Content ordering interfaces
 -   **Report Pages** - Custom report building and execution
+-   **Audit Logs** - System activity tracking and history
 
 ## Installation
 
@@ -224,6 +225,34 @@ A powerful data table component with sorting, filtering, and pagination.
 | setConfig     | Callback for configuration changes | Function | -       |
 | style         | Custom styles                      | Object   | -       |
 
+#### Auto-Refresh Functionality
+
+The DataGrid component includes an auto-refresh feature that automatically reloads data at specified intervals. This is useful for displaying real-time or frequently updated data.
+
+To enable auto-refresh:
+
+```jsx
+<DataGrid
+    ajaxSetting={{
+        url: '/api/data',
+        method: 'GET',
+        params: {},
+        autoRefresh: 30, // Refresh every 30 seconds
+        // or
+        autoRefresh: true, // Use default 30-second interval
+    }}
+    // Other props...
+/>
+```
+
+When auto-refresh is configured:
+
+-   A checkbox appears in the DataGrid header to enable/disable auto-refresh
+-   Auto-refresh is enabled by default when configured
+-   The interval can be customized (in seconds) by setting a numeric value
+-   Setting `autoRefresh: true` uses the default 30-second interval
+-   The component silently refreshes data without showing notifications
+
 ### Form Components
 
 #### Form
@@ -336,7 +365,7 @@ File upload component with drag and drop support.
 
 #### CustomFetch
 
-Data fetching utility with error handling.
+Data fetching utility with error handling and payload size validation.
 
 ```jsx
 // Using async/await
@@ -358,6 +387,15 @@ CustomFetch(
 );
 ```
 
+The CustomFetch component includes these features:
+
+-   **Payload Size Validation**: Automatically checks if the request payload exceeds the maximum allowed size (default: 4.5MB, configurable via `VITE_MAX_PAYLOAD_SIZE_MB` environment variable)
+-   **Toast Notifications**: Displays error messages using toast notifications
+-   **Promise Tracking**: Integrates with react-promise-tracker for loading indicators
+-   **HTML Error Parsing**: Properly renders HTML content in error messages
+-   **CSRF Protection**: Redirects to login page on CSRF token mismatch
+-   **Authentication Handling**: Silently handles unauthenticated errors without showing toast notifications
+
 #### Download
 
 File download utility.
@@ -404,6 +442,53 @@ The QrCode component fetches QR code data from the specified URL and displays it
 }
 ```
 
+#### AuditLogs and AuditLog
+
+The AuditLogs component displays a table of system activity logs, showing who made changes, what was changed, and when the changes occurred.
+
+```jsx
+<AuditLogs layout="full" />
+```
+
+The AuditLog component displays detailed information about a specific audit log entry.
+
+```jsx
+<AuditLog userProfile={userProfile} />
+```
+
+The AuditLogs component features:
+
+-   User tracking - Shows which user performed the action
+-   Event tracking - Displays the type of action (create, update, delete)
+-   Value comparison - Shows old and new values for changed fields
+-   IP address logging - Records the IP address of the user
+-   Timestamp recording - Shows when the action occurred
+-   Formatted display - Presents JSON data in a readable format
+
+The component expects audit log data from the API with the following structure:
+
+```json
+{
+    "id": 123,
+    "user": {
+        "id": 1,
+        "name": "John Doe"
+    },
+    "old_values": {
+        "field1": "old value",
+        "field2": "old value"
+    },
+    "new_values": {
+        "field1": "new value",
+        "field2": "new value"
+    },
+    "formatted_event": "Updating",
+    "ip_address": "192.168.1.1",
+    "url": "/api/resource/123",
+    "created_at": "2023-01-01T12:00:00Z"
+}
+```
+
 ## Two-Factor Authentication (2FA)
 
 ## Client Portal

package/package.json

@@ -84,7 +84,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.6.6",
+    "version": "5.6.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -17,7 +17,6 @@ import numeral from 'numeral';
 import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
-import 'react-toggle/style.css';
 import { saveAs } from 'file-saver';
 import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
 import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
@@ -386,10 +385,51 @@ const DataGrid = forwardRef(
         const [localInputValues, setLocalInputValues] = useState({});
         const localInputValuesRef = useRef({}); // Add this ref to track values
 
+        /** Auto Refresh States */
+        const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(false);
+        const [refreshInterval, setRefreshInterval] = useState(30); // Default 30 seconds interval
+        const refreshTimerRef = useRef(null);
+        const autoRefreshInitialized = useRef(false); // Track if we've initialized auto-refresh
+
+        /** Responsive Modal States */
+        const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
         useEffect(() => {
             localInputValuesRef.current = localInputValues;
         }, [localInputValues]);
 
+        // Effect to handle window resize for responsive modals
+        useEffect(() => {
+            const handleResize = () => {
+                setWindowWidth(window.innerWidth);
+            };
+
+            window.addEventListener('resize', handleResize);
+
+            // Clean up event listener on unmount
+            return () => {
+                window.removeEventListener('resize', handleResize);
+            };
+        }, []);
+
+        // Effect to handle autoRefresh setting
+        useEffect(() => {
+            if (ajaxSetting && ajaxSetting.autoRefresh !== undefined) {
+                // Enable auto-refresh by default when the setting is present
+                if (!autoRefreshInitialized.current) {
+                    setAutoRefreshEnabled(true);
+                    autoRefreshInitialized.current = true;
+                }
+
+                // Set the refresh interval based on the provided value
+                if (typeof ajaxSetting.autoRefresh === 'number') {
+                    setRefreshInterval(ajaxSetting.autoRefresh);
+                } else if (ajaxSetting.autoRefresh === true) {
+                    setRefreshInterval(30); // Default 30 seconds
+                }
+            }
+        }, [ajaxSetting]);
+
         /** Table Functions */
         useImperativeHandle(ref, () => ({
             reload: () => {
@@ -754,8 +794,6 @@ const DataGrid = forwardRef(
                     // Extracting nested value using predefined keys from 's.relation'
                     const nestedValue = getNestedValue(d, s.relation);
 
-                    console.info(d, s.relation);
-
                     // Check if nestedValue is defined and is an array before mapping
                     if (!nestedValue || !Array.isArray(nestedValue)) {
                         console.warn(
@@ -1243,11 +1281,33 @@ const DataGrid = forwardRef(
                             className={styles.searchInput}
                         />
                     </div>
-                    {!isCreateDisabled && (
-                        <div className={styles.actionButtonsWrapper}>
-                            {renderCreateButton()}
-                        </div>
-                    )}
+                    <div className={styles.actionButtonsWrapper}>
+                        {!isCreateDisabled && renderCreateButton()}
+                    </div>
+                </div>
+            );
+        };
+
+        const renderAutoRefreshControls = () => {
+            // Only show auto-refresh if the setting is present in ajaxSetting
+            if (!ajaxSetting || ajaxSetting.autoRefresh === undefined) {
+                return null;
+            }
+
+            return (
+                <div className={styles.autoRefreshContainer}>
+                    <label className={styles.autoRefreshLabel}>
+                        <input
+                            type="checkbox"
+                            checked={autoRefreshEnabled}
+                            onChange={() =>
+                                setAutoRefreshEnabled(!autoRefreshEnabled)
+                            }
+                            className={styles.autoRefreshCheckbox}
+                        />
+                        Auto Refresh{' '}
+                        {refreshInterval && `(${refreshInterval}s)`}
+                    </label>
                 </div>
             );
         };
@@ -1259,7 +1319,7 @@ const DataGrid = forwardRef(
                 if (linkUrl) {
                     const baseUrl = window.location.origin;
                     const fullUrl = `${baseUrl}${linkUrl}${
-                        rowProps.data[form.primaryKey]
+                        rowProps.data[cellProps?.link?.key || form.primaryKey]
                     }`;
 
                     menuProps.autoDismiss = true;
@@ -3146,6 +3206,34 @@ const DataGrid = forwardRef(
             };
         }, []);
 
+        // Auto-refresh effect
+        useEffect(() => {
+            // Clear any existing timer
+            if (refreshTimerRef.current) {
+                clearInterval(refreshTimerRef.current);
+                refreshTimerRef.current = null;
+            }
+
+            // Set up new timer if auto-refresh is enabled and the setting is present in ajaxSetting
+            if (
+                autoRefreshEnabled &&
+                ajaxSetting &&
+                ajaxSetting.autoRefresh !== undefined
+            ) {
+                refreshTimerRef.current = setInterval(() => {
+                    handleReload();
+                    // No toast notification on refresh
+                }, refreshInterval * 1000);
+            }
+
+            // Clean up on unmount
+            return () => {
+                if (refreshTimerRef.current) {
+                    clearInterval(refreshTimerRef.current);
+                }
+            };
+        }, [autoRefreshEnabled, refreshInterval, ajaxSetting]);
+
         return (
             <div
                 style={{
@@ -3156,12 +3244,15 @@ const DataGrid = forwardRef(
                     overflow: 'hidden',
                 }}
             >
-                {/* Search and action buttons container - separated from the DataGrid */}
-                {renderSearch() && (
-                    <div className={styles.dataGridTopContainer}>
+                {/* Top container with search, action buttons, and auto-refresh */}
+                <div className={styles.dataGridTopContainer}>
+                    <div className={styles.dataGridTopLeftContainer}>
                         {renderSearch()}
                     </div>
-                )}
+                    <div className={styles.dataGridTopRightContainer}>
+                        {renderAutoRefreshControls()}
+                    </div>
+                </div>
 
                 {/* DataGrid container with its own border */}
                 <div className={styles.dataGridContainer}>
@@ -3221,6 +3312,11 @@ const DataGrid = forwardRef(
                     open={modalShow}
                     onClose={modalClose}
                     closeOnDocumentClick={false}
+                    contentStyle={{
+                        width: windowWidth < 768 ? '95vw' : '80vw',
+                        minWidth: windowWidth < 768 ? '95vw' : '600px',
+                        maxWidth: '1200px',
+                    }}
                     nested
                 >
                     <Form
@@ -3244,7 +3340,11 @@ const DataGrid = forwardRef(
                     open={modalGalleryShow}
                     onClose={modalGalleryClose}
                     closeOnDocumentClick={false}
-                    contentStyle={{ width: 'auto', maxWidth: '90vw' }}
+                    contentStyle={{
+                        width: windowWidth < 768 ? '95vw' : '80vw',
+                        minWidth: windowWidth < 768 ? '95vw' : '600px',
+                        maxWidth: '1200px',
+                    }}
                     overlayStyle={{ background: 'rgba(0, 0, 0, 0.7)' }}
                 >
                     <div

package/src/components/crm/Field.jsx

@@ -1085,6 +1085,7 @@ function Field({
                                     ? settings.options
                                     : options
                             }
+                            isSearchable={settings.isSearchable || false}
                             isCreatable={settings.isCreatable || false}
                             dataOptions={dataOptions}
                             style={style}

package/src/components/crm/MultiSelect.jsx

@@ -27,6 +27,7 @@ function MultiSelect({
     settings,
     style,
     isCreatable = false,
+    isSearchable = true,
     creatableConfig = {},
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
@@ -142,7 +143,7 @@ function MultiSelect({
         <SelectComponent
             closeMenuOnSelect={!multi || settings.limit === 1}
             isClearable
-            isSearchable
+            isSearchable={isSearchable}
             isMulti={multi}
             filterOption={createFilter({ ignoreAccents: false })}
             components={{ SelectList }}

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

@@ -28,20 +28,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
     });
 
     const renderSsoButton = () => {
-        let content =
-            providers && providers.length > 0 ? (
-                <div className="formItem fwItem lastItem forgotten">
-                    <span
-                        style={{
-                            display: 'block',
-                            textAlign: 'center',
-                            width: '100%',
-                        }}
-                    >
-                        OR
-                    </span>
-                </div>
-            ) : null;
+        if (!providers || providers.length === 0) {
+            return null;
+        }
+
+        let content = <div className={styles.divider}>OR</div>;
 
         if (providers) {
             providers.forEach((provider) => {
@@ -51,13 +42,12 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                             <>
                                 {content}
                                 <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
+                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
                                 >
                                     <button
-                                        className={styles.btn}
+                                        className={styles.ssoButton}
                                         onClick={(e) => {
                                             e.preventDefault();
-
                                             window.location.href =
                                                 '/auth/azure';
                                         }}
@@ -66,10 +56,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                             src={
                                                 'https://d16lktya8ojp5z.cloudfront.net/generic/images/microsoft.png'
                                             }
-                                            width="13px"
-                                            height="13px"
-                                        />{' '}
-                                        Microsoft
+                                            width="18px"
+                                            height="18px"
+                                            alt="Microsoft logo"
+                                        />
+                                        Sign in with Microsoft
                                     </button>
                                 </div>
                             </>
@@ -182,6 +173,17 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                     alt="CRM"
                                     className={styles.loginlogo}
                                 />
+                                <h2
+                                    style={{
+                                        textAlign: 'center',
+                                        marginBottom: '1.5rem',
+                                        color: '#111827',
+                                        fontWeight: '600',
+                                        fontSize: '1.5rem',
+                                    }}
+                                >
+                                    Sign in to your account
+                                </h2>
                                 <div
                                     className={`${styles.formItem} ${styles.fwItem}`}
                                 >
@@ -232,9 +234,10 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                 >
                                     <div className={styles.rememberMeContainer}>
                                         <div
-                                            className={
-                                                styles.rememberMeCheckboxWrapper
-                                            }
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                            }}
                                         >
                                             <input
                                                 type="checkbox"
@@ -246,13 +249,28 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                                     styles.rememberMeCheckbox
                                                 }
                                             />
+                                            <label
+                                                htmlFor="rememberMe"
+                                                className={
+                                                    styles.rememberMeLabel
+                                                }
+                                            >
+                                                Remember me
+                                            </label>
+                                        </div>
+                                        <div>
+                                            <Link
+                                                to="/reset"
+                                                style={{
+                                                    color: 'var(--primary-color, #4f46e5)',
+                                                    textDecoration: 'none',
+                                                    fontWeight: '500',
+                                                    fontSize: '0.875rem',
+                                                }}
+                                            >
+                                                Forgot password?
+                                            </Link>
                                         </div>
-                                        <label
-                                            htmlFor="rememberMe"
-                                            className={styles.rememberMeLabel}
-                                        >
-                                            Remember me
-                                        </label>
                                     </div>
                                 </div>
                                 <div
@@ -263,17 +281,11 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                         type="submit"
                                         disabled={isLoading}
                                     >
-                                        {isLoading ? 'Logging in...' : 'Login'}
+                                        {isLoading
+                                            ? 'Signing in...'
+                                            : 'Sign in'}
                                     </button>
                                 </div>
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}
-                                >
-                                    <span>
-                                        Forgot your password?{' '}
-                                        <Link to="/reset">Click Here</Link>
-                                    </span>
-                                </div>
                                 {renderSsoButton()}
                             </div>
                         </Reveal>

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

@@ -53,11 +53,17 @@ const Reset = ({ logo }) => {
                                     alt="CRM"
                                     className={styles.loginlogo}
                                 />
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
+                                <h2
+                                    style={{
+                                        textAlign: 'center',
+                                        marginBottom: '1.5rem',
+                                        color: '#111827',
+                                        fontWeight: '600',
+                                        fontSize: '1.5rem',
+                                    }}
                                 >
-                                    <h1>Forgot your password?</h1>
-                                </div>
+                                    Forgot your password?
+                                </h2>
                                 <div
                                     className={`${styles.formItem} ${styles.fwItem}`}
                                 >
@@ -89,7 +95,7 @@ const Reset = ({ logo }) => {
                                         type="submit"
                                         tabIndex="2"
                                     >
-                                        Reset Password
+                                        Send Reset Link
                                     </button>
                                 </div>
                             </div>

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

@@ -107,11 +107,17 @@ const Verify = ({ logo }) => {
                                     alt="CRM"
                                     className={styles.loginlogo}
                                 />
-                                <div
-                                    className={`${styles.formItem} ${styles.fwItem}`}
+                                <h2
+                                    style={{
+                                        textAlign: 'center',
+                                        marginBottom: '1.5rem',
+                                        color: '#111827',
+                                        fontWeight: '600',
+                                        fontSize: '1.5rem',
+                                    }}
                                 >
-                                    <h1>Reset your password</h1>
-                                </div>
+                                    Reset your password
+                                </h2>
                                 <div
                                     className={`${styles.formItem} ${styles.fwItem}`}
                                 >
@@ -154,7 +160,7 @@ const Verify = ({ logo }) => {
                                         type="submit"
                                         tabIndex="3"
                                     >
-                                        Reset
+                                        Set New Password
                                     </button>
                                 </div>
                             </div>