@visns-studio/visns-components 5.6.5 → 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

@@ -16,17 +16,17 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.8.4",
+        "axios": "^1.9.0",
         "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
         "fabric": "^6.6.4",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.7.4",
+        "framer-motion": "^12.9.2",
         "html-react-parser": "^5.2.3",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^12.7.4",
+        "motion": "^12.9.2",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -48,7 +48,7 @@
         "react-signature-pad-wrapper": "^4.1.0",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
-        "react-to-print": "^3.0.6",
+        "react-to-print": "^3.1.0",
         "react-toastify": "^11.0.5",
         "react-toggle": "^4.1.3",
         "react-tooltip": "^5.28.1",
@@ -62,7 +62,7 @@
         "validator": "^13.15.0",
         "vite": "^5.4.18",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.22.0"
+        "yet-another-react-lightbox": "^3.23.0"
     },
     "devDependencies": {
         "@babel/core": "^7.26.10",
@@ -84,7 +84,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.6.5",
+    "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

@@ -1,5 +1,24 @@
 import '../../styles/global.css';
 
+/**
+ * GenericDetail Component
+ *
+ * This component supports two editing modes:
+ * 1. Modal editing (default) - Opens a modal with the form when the edit button is clicked
+ * 2. In-place editing - Makes the existing interface editable when the edit button is clicked
+ *
+ * To enable in-place editing, add the `inPlaceEdit: true` property to the form object in the tab configuration.
+ * Example:
+ * {
+ *   id: 'overview',
+ *   type: 'overview',
+ *   form: {
+ *     inPlaceEdit: true,
+ *     // other form properties
+ *   }
+ * }
+ */
+
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { Calendar, momentLocalizer } from 'react-big-calendar';
@@ -1546,7 +1565,6 @@ function GenericDetail({
                                                                                             src={
                                                                                                 imageSource
                                                                                             }
-                                                                                            width="300"
                                                                                             alt={
                                                                                                 a.file_name
                                                                                             }
@@ -1571,6 +1589,17 @@ function GenericDetail({
                                                                                                 styles.delete
                                                                                             }
                                                                                         />
+                                                                                        {a.file_name && (
+                                                                                            <div
+                                                                                                className={
+                                                                                                    styles.filename
+                                                                                                }
+                                                                                            >
+                                                                                                {
+                                                                                                    a.file_name
+                                                                                                }
+                                                                                            </div>
+                                                                                        )}
                                                                                     </div>
                                                                                 </li>
                                                                             )
@@ -1586,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
@@ -1611,6 +1648,7 @@ function GenericDetail({
                                                                             a.file_name
                                                                         );
                                                                     }}
+                                                                    title="Delete file"
                                                                 >
                                                                     <TrashCan
                                                                         strokeWidth={
@@ -1833,104 +1871,225 @@ function GenericDetail({
                         case 'overview':
                             return (
                                 <>
-                                    <div className={styles.gridtxt}>
-                                        {activeTabConfig.sections.map(
-                                            (section, sectionIndex) => (
-                                                <React.Fragment
-                                                    key={`section-${activeTabConfig.id}-${sectionIndex}`}
-                                                >
-                                                    <div
-                                                        className={
-                                                            styles.gridtxt__header
-                                                        }
+                                    {/* Show the form in-place when editing is active */}
+                                    {inPlaceEditing &&
+                                    editingTabId === activeTabConfig.id &&
+                                    activeTabConfig.form ? (
+                                        <div
+                                            className={`${styles.gridtxt} inPlaceEdit`}
+                                        >
+                                            <div
+                                                className={
+                                                    styles.gridtxt__header
+                                                }
+                                            >
+                                                <span>
+                                                    {activeTabConfig.title ||
+                                                        'Edit'}
+                                                </span>
+                                            </div>
+                                            <Form
+                                                key={`form-inline-${activeTabConfig.id}`}
+                                                columnId={routeParams[urlParam]}
+                                                formSettings={
+                                                    activeTabConfig.form
+                                                }
+                                                formType="update"
+                                                paramValue={
+                                                    routeParams[urlParam] ||
+                                                    null
+                                                }
+                                                style={
+                                                    userProfile?.settings
+                                                        ?.style || {}
+                                                }
+                                                updateForm={setFormData}
+                                                type="inline"
+                                                userProfile={userProfile}
+                                                fetchTable={() => {
+                                                    handleReload();
+                                                    setInPlaceEditing(false);
+                                                    setEditingTabId(null);
+                                                }}
+                                            />
+                                        </div>
+                                    ) : (
+                                        // Show the regular overview when not editing
+                                        <div className={styles.gridtxt}>
+                                            {activeTabConfig.sections.map(
+                                                (section, sectionIndex) => (
+                                                    <React.Fragment
+                                                        key={`section-${activeTabConfig.id}-${sectionIndex}`}
                                                     >
-                                                        <span>
-                                                            {section.title}
-                                                        </span>
-                                                    </div>
-                                                    {section.content &&
-                                                        section.content.length >
-                                                            0 && (
-                                                            <ul
-                                                                className={
-                                                                    styles.customer__overview
-                                                                }
-                                                            >
-                                                                {section.content.map(
-                                                                    (
-                                                                        item,
-                                                                        itemKey
-                                                                    ) => (
-                                                                        <li
-                                                                            key={`li-${item.id}-${itemKey}`}
-                                                                            className={
-                                                                                item.size ===
-                                                                                'full'
-                                                                                    ? `${styles['fw-grid-item']} ${styles.notecolor}`
-                                                                                    : null
-                                                                            }
-                                                                        >
-                                                                            <strong>
-                                                                                {item.label
-                                                                                    ? `${item.label}:`
-                                                                                    : null}
-                                                                            </strong>{' '}
-                                                                            {item
-                                                                                .href
-                                                                                ?.url &&
-                                                                            item
-                                                                                .href
-                                                                                ?.key ? (
-                                                                                <Link
-                                                                                    to={`${
-                                                                                        item
-                                                                                            .href
-                                                                                            .url
-                                                                                    }${
-                                                                                        data[
+                                                        <div
+                                                            className={
+                                                                styles.gridtxt__header
+                                                            }
+                                                        >
+                                                            <span>
+                                                                {section.title}
+                                                            </span>
+                                                        </div>
+                                                        {section.content &&
+                                                            section.content
+                                                                .length > 0 && (
+                                                                <ul
+                                                                    className={
+                                                                        styles.customer__overview
+                                                                    }
+                                                                >
+                                                                    {section.content.map(
+                                                                        (
+                                                                            item,
+                                                                            itemKey
+                                                                        ) => (
+                                                                            <li
+                                                                                key={`li-${item.id}-${itemKey}`}
+                                                                                className={
+                                                                                    item.size ===
+                                                                                    'full'
+                                                                                        ? `${styles['fw-grid-item']} ${styles.notecolor}`
+                                                                                        : null
+                                                                                }
+                                                                            >
+                                                                                <strong>
+                                                                                    {item.label
+                                                                                        ? `${item.label}:`
+                                                                                        : null}
+                                                                                </strong>{' '}
+                                                                                {item
+                                                                                    .href
+                                                                                    ?.url &&
+                                                                                item
+                                                                                    .href
+                                                                                    ?.key ? (
+                                                                                    <Link
+                                                                                        to={`${
                                                                                             item
                                                                                                 .href
-                                                                                                .key
-                                                                                        ]
-                                                                                    }`}
-                                                                                >
-                                                                                    {renderValue(
-                                                                                        item,
-                                                                                        data
-                                                                                    )}
-                                                                                </Link>
-                                                                            ) : (
-                                                                                <>
-                                                                                    {renderValue(
-                                                                                        item,
-                                                                                        data
-                                                                                    )}
-                                                                                </>
-                                                                            )}
-                                                                        </li>
-                                                                    )
-                                                                )}
-                                                            </ul>
-                                                        )}
-                                                </React.Fragment>
-                                            )
-                                        )}
-                                    </div>
+                                                                                                .url
+                                                                                        }${
+                                                                                            data[
+                                                                                                item
+                                                                                                    .href
+                                                                                                    .key
+                                                                                            ]
+                                                                                        }`}
+                                                                                    >
+                                                                                        {renderValue(
+                                                                                            item,
+                                                                                            data
+                                                                                        )}
+                                                                                    </Link>
+                                                                                ) : (
+                                                                                    <>
+                                                                                        {renderValue(
+                                                                                            item,
+                                                                                            data
+                                                                                        )}
+                                                                                    </>
+                                                                                )}
+                                                                            </li>
+                                                                        )
+                                                                    )}
+                                                                </ul>
+                                                            )}
+                                                    </React.Fragment>
+                                                )
+                                            )}
+                                        </div>
+                                    )}
 
                                     {activeTabConfig.form && (
                                         <div className={styles.polActions}>
-                                            {/* Always render the "Edit" button if activeTabConfig.form exists */}
-                                            <button
-                                                className={styles.btn}
-                                                onClick={() =>
-                                                    modalOpen(
-                                                        'update',
-                                                        routeParams[urlParam]
-                                                    )
-                                                }
-                                            >
-                                                Edit
-                                            </button>
+                                            {/* Render the "Edit" button if activeTabConfig.form exists */}
+                                            {!inPlaceEditing ? (
+                                                <button
+                                                    className={styles.btn}
+                                                    onClick={() => {
+                                                        if (
+                                                            activeTabConfig.form
+                                                                .inPlaceEdit
+                                                        ) {
+                                                            startInPlaceEditing(
+                                                                activeTabConfig.id
+                                                            );
+                                                        } else {
+                                                            modalOpen(
+                                                                'update',
+                                                                routeParams[
+                                                                    urlParam
+                                                                ]
+                                                            );
+                                                        }
+                                                    }}
+                                                >
+                                                    Edit
+                                                </button>
+                                            ) : (
+                                                editingTabId ===
+                                                    activeTabConfig.id && (
+                                                    <>
+                                                        <button
+                                                            className={
+                                                                styles.btn
+                                                            }
+                                                            onClick={
+                                                                cancelInPlaceEditing
+                                                            }
+                                                            style={{
+                                                                backgroundColor:
+                                                                    '#fff0f0',
+                                                                color: '#d32f2f',
+                                                                border: '1px solid #ffcdd2',
+                                                            }}
+                                                        >
+                                                            Cancel
+                                                        </button>
+                                                        <button
+                                                            className={
+                                                                styles.btn
+                                                            }
+                                                            onClick={() => {
+                                                                // Find the form's save button and click it
+                                                                const saveButton =
+                                                                    document.querySelector(
+                                                                        `.inPlaceEdit .${styles.saveBtn}`
+                                                                    );
+                                                                if (
+                                                                    saveButton
+                                                                ) {
+                                                                    saveButton.click();
+                                                                } else {
+                                                                    // Fallback to any button with data-type="save"
+                                                                    const fallbackButton =
+                                                                        document.querySelector(
+                                                                            `.inPlaceEdit button[data-type="save"]`
+                                                                        );
+                                                                    if (
+                                                                        fallbackButton
+                                                                    ) {
+                                                                        fallbackButton.click();
+                                                                    }
+                                                                }
+
+                                                                // Reset the editing state
+                                                                setInPlaceEditing(
+                                                                    false
+                                                                );
+                                                                setEditingTabId(
+                                                                    null
+                                                                );
+
+                                                                // Reload data
+                                                                handleReload();
+                                                            }}
+                                                        >
+                                                            Save
+                                                        </button>
+                                                    </>
+                                                )
+                                            )}
 
                                             {/* Check if sections contain "ocrTemplate" type and render the "Save" button under the same polActions */}
                                             {activeTabConfig.sections &&
@@ -2545,6 +2704,8 @@ function GenericDetail({
     const [formType, setFormType] = useState('');
     const [formId, setFormId] = useState(0);
     const [modalShow, setModalShow] = useState(false);
+    const [inPlaceEditing, setInPlaceEditing] = useState(false);
+    const [editingTabId, setEditingTabId] = useState(null);
 
     /** Modal Functions */
     const modalOpen = (formType, formId) => {
@@ -2557,6 +2718,19 @@ function GenericDetail({
         setModalShow(false);
     };
 
+    /** In-place Editing Functions */
+    const startInPlaceEditing = (tabId) => {
+        setInPlaceEditing(true);
+        setEditingTabId(tabId);
+        setFormType('update');
+        setFormId(routeParams[urlParam]);
+    };
+
+    const cancelInPlaceEditing = () => {
+        setInPlaceEditing(false);
+        setEditingTabId(null);
+    };
+
     return (
         <>
             <div className={styles.grid}>

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/Form.module.scss

@@ -318,6 +318,7 @@ input[type='file'] {
     bottom: 15px;
     right: 20px;
     width: auto;
+    z-index: 100;
 }
 
 .polActions button {
@@ -327,6 +328,53 @@ input[type='file'] {
     margin: 0 0.15em;
 }
 
+/* For in-place editing mode */
+:global(.inPlaceEdit) {
+    background-color: rgba(245, 247, 250, 0.7);
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+:global(.inPlaceEdit) [class*='gridtxt__header'] {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 10px 15px;
+    margin-bottom: 15px;
+    border-radius: 4px 4px 0 0;
+}
+
+:global(.inPlaceEdit) .polActions {
+    position: static;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    padding: 0 15px;
+    width: 100%;
+    gap: 10px;
+}
+
+:global(.inPlaceEdit) .polActions button {
+    margin: 0;
+    min-width: 120px;
+    border-radius: 4px;
+}
+
+/* Style for cancel button hover state */
+:global(.inPlaceEdit) button[style*='color: #d32f2f']:hover {
+    background-color: #ffebee !important;
+    border-color: #ef9a9a !important;
+}
+
+/* Hide the save button at the bottom of the form when in in-place edit mode */
+:global(.inPlaceEdit) .formcontainer > .polActions {
+    display: none;
+}
+
 .buttonContainer {
     display: flex;
     justify-content: center;

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 {