@visns-studio/visns-components 5.6.6 → 5.6.7

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.7",
     "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/generic/GenericDetail.jsx

@@ -1565,7 +1565,6 @@ function GenericDetail({
                                                                                             src={
                                                                                                 imageSource
                                                                                             }
-                                                                                            width="300"
                                                                                             alt={
                                                                                                 a.file_name
                                                                                             }
@@ -1590,6 +1589,17 @@ function GenericDetail({
                                                                                                 styles.delete
                                                                                             }
                                                                                         />
+                                                                                        {a.file_name && (
+                                                                                            <div
+                                                                                                className={
+                                                                                                    styles.filename
+                                                                                                }
+                                                                                            >
+                                                                                                {
+                                                                                                    a.file_name
+                                                                                                }
+                                                                                            </div>
+                                                                                        )}
                                                                                     </div>
                                                                                 </li>
                                                                             )
@@ -1605,21 +1615,29 @@ function GenericDetail({
                                                         }
                                                     >
                                                         {files.map((a, b) => (
-                                                            <li
-                                                                onClick={() => {
-                                                                    downloadFile(
-                                                                        a
-                                                                    );
-                                                                }}
-                                                                key={'tf-' + b}
-                                                            >
-                                                                <File
-                                                                    strokeWidth={
-                                                                        2
-                                                                    }
-                                                                    size={18}
-                                                                />
-                                                                {a.file_name}
+                                                            <li key={'tf-' + b}>
+                                                                <div
+                                                                    className="file-info"
+                                                                    onClick={() => {
+                                                                        downloadFile(
+                                                                            a
+                                                                        );
+                                                                    }}
+                                                                >
+                                                                    <File
+                                                                        strokeWidth={
+                                                                            2
+                                                                        }
+                                                                        size={
+                                                                            20
+                                                                        }
+                                                                    />
+                                                                    <div className="filename">
+                                                                        {
+                                                                            a.file_name
+                                                                        }
+                                                                    </div>
+                                                                </div>
                                                                 <button
                                                                     onClick={(
                                                                         event
@@ -1630,6 +1648,7 @@ function GenericDetail({
                                                                             a.file_name
                                                                         );
                                                                     }}
+                                                                    title="Delete file"
                                                                 >
                                                                     <TrashCan
                                                                         strokeWidth={

package/src/components/crm/generic/styles/GenericDetail.module.scss

@@ -285,76 +285,129 @@
 
 .dropzone__files {
     list-style: none;
-    padding: 0;
+    padding: 16px 0;
     margin: 0;
     box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
+    gap: 16px;
+
+    /* Responsive grid layout */
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(1, 1fr); /* 1 column on small screens */
+    }
 
     li {
-        width: 100%;
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         background: rgba(var(--primary-rgb), 0.05);
         color: var(--primary-color);
-        border-radius: 3px;
-        transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-        outline: none;
+        border-radius: 6px;
+        transition: all 0.2s ease;
         cursor: pointer;
-        border-radius: 3px;
-        padding: 0.5rem;
+        padding: 12px 16px;
         box-sizing: border-box;
         position: relative;
         border: 1px solid rgba(var(--primary-rgb), 0.15);
-        line-height: 1;
-        font-size: 0.85rem;
-        margin-bottom: 5px;
+        line-height: 1.4;
+        font-size: 0.9rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            background: rgba(var(--primary-rgb), 0.08);
+        }
 
-        svg {
-            position: relative;
-            top: -2px;
-            color: rgba(var(--secondary-rgb), 1);
-            float: left;
-            stroke-width: 1;
-            line-height: 1;
-            margin-right: 5px;
+        .file-info {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            overflow: hidden;
+
+            svg {
+                color: var(--secondary-color);
+                flex-shrink: 0;
+                margin-right: 12px;
+            }
+
+            .filename {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
         }
 
         button {
-            position: relative;
-            float: right;
             background: none;
             outline: none;
             border: none;
-            z-index: 200;
+            padding: 6px;
+            margin-left: 8px;
+            border-radius: 4px;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background-color 0.2s ease;
+
+            &:hover {
+                background-color: rgba(var(--primary-rgb), 0.1);
+            }
 
             svg {
-                font-size: 1em;
                 color: var(--primary-color);
-                line-height: 1;
             }
         }
     }
-
-    li:hover {
-        background: rgba(var(--secondary-color-rgb, 0.65));
-    }
 }
 
 .sortlist {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* 4 columns by default */
+    gap: 16px;
+    padding: 16px 0;
     list-style: none;
 
+    /* Responsive grid layout */
+    @media (max-width: 1200px) {
+        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
+    }
+
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(2, 1fr); /* 2 columns on small screens */
+    }
+
+    @media (max-width: 480px) {
+        grid-template-columns: repeat(
+            1,
+            1fr
+        ); /* 1 column on very small screens */
+    }
+
     li {
         position: relative;
+        aspect-ratio: 4/3;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+        cursor: pointer;
+
+        &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
 
         .sortimg {
-            width: 300px;
-            height: 300px;
+            width: 100%;
+            height: 100%;
             border-radius: 8px;
             overflow: hidden;
             position: relative;
+            display: flex;
+            flex-direction: column;
 
             img {
                 width: 100%;
@@ -376,6 +429,21 @@
                     background: rgba(255, 255, 255, 1);
                 }
             }
+
+            .filename {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                padding: 8px;
+                background-color: rgba(0, 0, 0, 0.6);
+                color: white;
+                font-size: 0.8rem;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                z-index: 1;
+            }
         }
     }
 }

package/src/components/crm/generic/styles/GenericMain.module.scss

@@ -1,7 +1,7 @@
 .header {
     background: var(--primary-color);
     color: var(--primary-color);
-    position: relative;
+    position: sticky;
     top: 0;
     width: 100%;
     z-index: 995;
@@ -11,7 +11,7 @@
 .headerAlternate {
     background: var(--bg-color);
     color: var(--paragraph-color);
-    position: relative;
+    position: sticky;
     top: 0;
     width: 100%;
     z-index: 995;

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

@@ -596,7 +596,22 @@
 
 /* DataGrid top container and search container styles */
 .dataGridTopContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 8px;
+    padding: 0 5px;
+}
+
+.dataGridTopLeftContainer {
+    flex: 1;
+}
+
+.dataGridTopRightContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 10px;
 }
 
 .searchContainer {
@@ -651,12 +666,44 @@
     justify-content: flex-end;
 }
 
+/* Auto-refresh controls */
+.autoRefreshContainer {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 15px;
+    height: 38px;
+    background-color: #f9fafb;
+    border: 1px solid #d1d5db;
+    border-radius: var(--br, 4px);
+    margin-left: 10px;
+    margin-bottom: 0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.autoRefreshLabel {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9rem;
+    color: var(--secondary-color, #1f2937);
+    white-space: nowrap;
+    cursor: pointer;
+    font-weight: normal;
+}
+
+.autoRefreshCheckbox {
+    margin: 0;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+}
+
 /* Container for when only the action button is shown (search disabled) */
 .actionButtonsContainer {
     display: flex;
     justify-content: flex-end;
     width: 100%;
-    margin-bottom: 8px; /* Reduced spacing to match when searchbar is present */
+    margin-bottom: 0; /* No bottom margin to align with auto-refresh */
 }
 
 .actionButtons {

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

@@ -618,6 +618,9 @@
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none; /* Firefox */
         -ms-overflow-style: none; /* IE and Edge */
+        position: sticky;
+        top: 0;
+        z-index: 995;
 
         /* Hide scrollbar for Chrome/Safari/Opera */
         &::-webkit-scrollbar {
@@ -805,6 +808,12 @@
 
     .content {
         margin-left: 0;
+
+        .content-header {
+            position: sticky;
+            top: 0;
+            z-index: 995;
+        }
     }
 
     .popup-content {