@visns-studio/visns-components 5.5.3 → 5.5.5

package/README.md

@@ -14,28 +14,34 @@ VISNS Components is a React-based UI component library that provides a set of re
 ### Authentication System
 
 -   **Login** - Email/password authentication
--   **Two-Factor Authentication (2FA)** - Additional security layer (optional)
+-   **Two-Factor Authentication (2FA)** - Additional security layer with QR code and manual setup
 -   **Password Reset** - Secure password recovery flow
 -   **Profile Management** - User profile editing
 -   **SSO Integration** - Support for Microsoft Azure
+-   **Remember Me** - Persistent login option that works with 2FA
 
 ### Data Visualization
 
 -   **DataGrid** - Powerful data table with sorting, filtering, and pagination
 -   **Charts** - Various chart types for data visualization
+-   **Report Builder** - Custom report creation with table joins, column selection, and filtering
+-   **Sketch Field** - Interactive drawing tools for diagrams and annotations
 
 ### Form Components
 
 -   **Form Builder** - Dynamic form creation and validation
 -   **Field Components** - Text inputs, selects, checkboxes, etc.
--   **Multi-select** - Enhanced select with multiple selection support
+-   **Multi-select** - Enhanced select with multiple selection support and selection limits
 -   **Autocomplete** - Mapbox integration for location selection
 -   **Dropzone** - File upload with drag and drop support
+-   **AsyncSelect** - Asynchronous data loading for select components
+-   **Creatable Select** - Select components that allow creating new options
 
 ### Navigation
 
 -   **Header/Navigation** - Application header with navigation
 -   **Sub Navigation** - Secondary navigation options
+-   **Breadcrumb** - Path-based navigation component
 
 ### Utility Components
 
@@ -44,6 +50,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **Loader** - Loading indicators
 -   **Notification** - Toast notifications
 -   **Call Popup** - Modal dialogs
+-   **QR Code** - QR code generation and printing
 
 ### Generic Pages
 
@@ -51,6 +58,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **Detail Pages** - Item detail templates
 -   **Notification Pages** - User notification center
 -   **Sorting Pages** - Content ordering interfaces
+-   **Report Pages** - Custom report building and execution
 
 ## Installation
 
@@ -230,7 +238,7 @@ A flexible form component with validation.
 
 #### AsyncSelect
 
-Asynchronous select component with search functionality.
+Asynchronous select component with search functionality and dynamic data loading.
 
 ```jsx
 <AsyncSelect
@@ -239,23 +247,53 @@ Asynchronous select component with search functionality.
     labelKey="name"
     placeholder="Select an option"
     onChange={handleChange}
-    value={selectedValue}
+    inputValue={selectedValue}
+    settings={{
+        id: 'myAsyncSelect',
+        params: { additionalParam: 'value' }, // Optional: additional parameters to send with the request
+    }}
+    isCreatable={false} // Optional: allow creating new options
+    creatableConfig={{
+        // Configuration for creatable options
+        url: '/api/options/create',
+        method: 'POST',
+    }}
 />
 ```
 
+The AsyncSelect component supports these features:
+
+-   **Dynamic Data Loading**: Loads options from an API endpoint as the user types
+-   **Debounced Requests**: Prevents excessive API calls during typing
+-   **Custom Parameters**: Send additional parameters with the API request
+-   **Creatable Options**: Allow users to create new options that don't exist in the API
+
 #### MultiSelect
 
-Select component with multiple selection support.
+Select component with multiple selection support and optional selection limits.
 
 ```jsx
 <MultiSelect
     options={options}
-    value={selectedValues}
+    inputValue={selectedValues}
     onChange={handleChange}
     placeholder="Select options"
+    multi={true}
+    settings={{
+        id: 'myMultiSelect',
+        limit: 3, // Optional: limit the number of selections
+    }}
+    isCreatable={false} // Optional: allow creating new options
+    creatableConfig={{}} // Configuration for creatable options
 />
 ```
 
+The MultiSelect component supports these features:
+
+-   **Selection Limits**: Set a maximum number of items that can be selected
+-   **Single Item Mode**: When `limit={1}` with `multi={true}`, it keeps only the most recently selected item
+-   **Creatable Options**: Allow users to create new options that don't exist in the list
+
 #### Autocomplete
 
 Location autocomplete with Mapbox integration.
@@ -289,6 +327,10 @@ File upload component with drag and drop support.
 Data fetching utility with error handling.
 
 ```jsx
+// Using async/await
+const result = await CustomFetch('/api/data', 'GET', { param1: 'value1' });
+
+// Using callbacks
 CustomFetch(
     '/api/data',
     'GET',
@@ -332,6 +374,24 @@ Toast notification component.
 />
 ```
 
+#### QrCode
+
+QR code generation and printing component.
+
+```jsx
+<QrCode config={{ url: '/api/qrcode' }} dataId={123} />
+```
+
+The QrCode component fetches QR code data from the specified URL and displays it with a print button. The API response should include:
+
+```json
+{
+    "logo": "optional-logo-url",
+    "qrCode": "base64-encoded-svg-data",
+    "title": "QR Code Title"
+}
+```
+
 ## Two-Factor Authentication (2FA)
 
 ### How 2FA Works
@@ -342,6 +402,15 @@ Toast notification component.
 4. User enters the verification code
 5. If the code is valid, the user is authenticated and redirected to the main application
 
+### Setting Up 2FA
+
+Users can set up 2FA through their profile page. The setup process includes:
+
+1. Generating a QR code that can be scanned with authenticator apps
+2. Providing a secret key for manual entry
+3. Verifying the setup with a 6-digit code
+4. Receiving recovery codes for backup access
+
 ### Enforcing 2FA
 
 You can enforce 2FA for all users by setting the `enforce2FA` prop to `true` on the GenericAuth component:
@@ -367,6 +436,14 @@ When 2FA enforcement is disabled (default):
 1. No alert is shown to users without 2FA
 2. Users can still enable 2FA voluntarily through their profile page
 
+### Remember Me Functionality
+
+The login form includes a "Remember Me" checkbox that persists through the 2FA verification process. When enabled:
+
+1. The user's login session will be remembered for a longer period
+2. The "Remember Me" setting is passed from the login form to the 2FA verification process
+3. The setting is applied only after successful 2FA verification
+
 ### API Integration for 2FA
 
 #### Login Endpoint Response (when 2FA is required)
@@ -391,7 +468,8 @@ Request:
 {
     "user_id": "user_id",
     "verification_code": "123456",
-    "previous_url": "/optional-redirect-url"
+    "previous_url": "/optional-redirect-url",
+    "remember": true
 }
 ```
 
@@ -410,6 +488,74 @@ Response:
 }
 ```
 
+#### 2FA Setup Endpoint Response
+
+```json
+{
+    "two_factor_enabled": true,
+    "two_factor_confirmed": false,
+    "qr_code": "<SVG data for QR code>",
+    "secret_key": "ABCDEFGHIJKLMNOP",
+    "recovery_codes": ["code1", "code2", "code3", ...]
+}
+```
+
+### Report Builder Component
+
+#### GenericReport
+
+A powerful report building component that allows users to create custom reports by selecting tables, columns, and configuring joins, filters, and sorting.
+
+```jsx
+<GenericReport
+    setting={{
+        tableUrl: '/ajax/reportBuilder/getTables',
+        columnUrl: '/ajax/reportBuilder/getTableColumns',
+        reportsUrl: '/ajax/reportBuilder/reports',
+        executeUrl: '/ajax/reportBuilder/execute',
+        suggestedJoinsUrl: '/ajax/reportBuilder/getSuggestedJoins',
+    }}
+/>
+```
+
+The GenericReport component provides these features:
+
+-   **Table Selection**: Choose a main table for the report
+-   **Column Selection**: Select columns to include in the report
+-   **Table Joins**: Add related tables with automatic relationship detection
+-   **Filtering**: Apply filters to the report data
+-   **Sorting**: Sort the report results
+-   **Report Preview**: View a preview of the report data
+-   **Save/Load Reports**: Save reports for future use and load saved reports
+-   **Export**: Export reports in various formats
+
+### Sketch Field Component
+
+#### SketchField
+
+An interactive drawing component based on Fabric.js that provides various drawing tools.
+
+```jsx
+<SketchField
+    width={800}
+    height={600}
+    tool={Tools.Pencil} // Available tools: Select, Pencil, Line, Arrow, Rectangle, Circle, Pan
+    lineColor="black"
+    lineWidth={3}
+    backgroundColor="transparent"
+    backgroundImage="/path/to/background-image.jpg" // Optional
+    onChange={handleChange}
+/>
+```
+
+The SketchField component supports these features:
+
+-   **Multiple Drawing Tools**: Pencil, Line, Arrow, Rectangle, Circle, etc.
+-   **Background Images**: Add background images for annotation
+-   **Undo/Redo**: History management for drawing actions
+-   **Save/Load**: Save drawings as JSON and load them later
+-   **Customization**: Configure colors, line widths, and other properties
+
 ## Customization
 
 ### Theming

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -756,6 +756,17 @@ 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(
+                            'Gallery data is undefined or not an array'
+                        );
+                        toast.warning('Gallery data is unavailable');
+                        return;
+                    }
+
                     // Mapping nested values to create gallery array with source, captions, and dimensions
                     const galleryArray = nestedValue.map((item) => ({
                         src: item[s.key],
@@ -1337,7 +1348,13 @@ const DataGrid = forwardRef(
             const handleIconClick = (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                handleSettingClick(s, d);
+
+                // Ensure both s and d are defined before calling handleSettingClick
+                if (s && d) {
+                    handleSettingClick(s, d);
+                } else {
+                    console.warn('Missing settings or data for icon click');
+                }
             };
 
             const tooltipContent =

package/src/components/crm/Form.jsx

@@ -882,7 +882,9 @@ function Form({
                             closeModal();
                             if (type === 'saveAnother') {
                                 const { saveAnother } =
-                                    formSettings?.update || {};
+                                    formSettings?.update ||
+                                    formSettings?.create ||
+                                    {};
 
                                 if (
                                     saveAnother?.url &&
@@ -919,6 +921,16 @@ function Form({
                                     fetchData();
                                     modalOpen('create', 0);
                                 }
+                            } else if (type === 'saveExit') {
+                                const { saveExit } =
+                                    formSettings?.update ||
+                                    formSettings?.create ||
+                                    {};
+
+                                if (saveExit?.redirectUrl) {
+                                    console.info('aa');
+                                    navigate(saveExit.redirectUrl);
+                                }
                             }
                         } else {
                             toast.success(
@@ -1505,11 +1517,25 @@ function Form({
                         </button>
                     ) : null}
 
-                    <button className={styles.saveBtn} onClick={handleSubmit}>
+                    <button
+                        className={styles.saveBtn}
+                        onClick={handleSubmit}
+                        data-type="save"
+                    >
                         {formSettings?.save?.button?.label
                             ? formSettings.save.button.label
                             : 'Save'}
                     </button>
+
+                    {formSettings.hasOwnProperty('saveExit') && (
+                        <button
+                            className={styles.btn}
+                            onClick={handleSubmit}
+                            data-type="saveExit"
+                        >
+                            {formSettings.saveExit?.label || 'Save & Exit'}
+                        </button>
+                    )}
                 </div>
             </div>
         );
@@ -1621,65 +1647,102 @@ function Form({
                                         }}
                                     />
                                 </div>
-                                {formType === 'create' &&
-                                formSettings.create?.hasOwnProperty(
-                                    'saveAnother'
-                                ) ? (
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
-                                    >
-                                        <button
-                                            className={styles.btn}
-                                            onClick={handleSubmit}
-                                            data-type="save"
-                                        >
-                                            Save & Close
-                                        </button>
-                                        <button
-                                            className={styles.btn}
-                                            onClick={handleSubmit}
-                                            data-type="saveAnother"
-                                        >
-                                            Save & Create Another
-                                        </button>
-                                    </div>
-                                ) : formType === 'update' &&
-                                  formSettings.update?.hasOwnProperty(
-                                      'saveAnother'
-                                  ) ? (
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
-                                    >
-                                        <button
-                                            className={styles.btn}
-                                            onClick={handleSubmit}
-                                            data-type="save"
-                                        >
-                                            Save & Close
-                                        </button>
-                                        <button
-                                            className={styles.btn}
-                                            onClick={handleSubmit}
-                                            data-type="saveAnother"
-                                        >
-                                            {formSettings.update.saveAnother
-                                                .label ||
-                                                'Save & Create Another'}
-                                        </button>
-                                    </div>
-                                ) : (
-                                    <div
-                                        className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
-                                    >
-                                        <button
-                                            className={styles.btn}
-                                            onClick={handleSubmit}
-                                            data-type="save"
-                                        >
-                                            Save
-                                        </button>
-                                    </div>
-                                )}
+                                {(() => {
+                                    if (formType === 'create') {
+                                        return (
+                                            <div
+                                                className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
+                                            >
+                                                <button
+                                                    className={styles.btn}
+                                                    onClick={handleSubmit}
+                                                    data-type="save"
+                                                >
+                                                    Save & Close
+                                                </button>
+                                                {formSettings.create?.hasOwnProperty(
+                                                    'saveAnother'
+                                                ) && (
+                                                    <button
+                                                        className={styles.btn}
+                                                        onClick={handleSubmit}
+                                                        data-type="saveAnother"
+                                                    >
+                                                        Save & Create Another
+                                                    </button>
+                                                )}
+                                                {formSettings.create?.hasOwnProperty(
+                                                    'saveExit'
+                                                ) && (
+                                                    <button
+                                                        className={styles.btn}
+                                                        onClick={handleSubmit}
+                                                        data-type="saveExit"
+                                                    >
+                                                        {formSettings.create
+                                                            .saveExit?.label ||
+                                                            'Save & Exit'}
+                                                    </button>
+                                                )}
+                                            </div>
+                                        );
+                                    } else if (formType === 'update') {
+                                        return (
+                                            <div
+                                                className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
+                                            >
+                                                <button
+                                                    className={styles.btn}
+                                                    onClick={handleSubmit}
+                                                    data-type="save"
+                                                >
+                                                    Save & Close
+                                                </button>
+                                                {formSettings.update?.hasOwnProperty(
+                                                    'saveAnother'
+                                                ) && (
+                                                    <button
+                                                        className={styles.btn}
+                                                        onClick={handleSubmit}
+                                                        data-type="saveAnother"
+                                                    >
+                                                        {formSettings.update
+                                                            .saveAnother
+                                                            ?.label ||
+                                                            'Save & Create Another'}
+                                                    </button>
+                                                )}
+                                                {formSettings.update?.hasOwnProperty(
+                                                    'saveExit'
+                                                ) && (
+                                                    <button
+                                                        className={styles.btn}
+                                                        onClick={handleSubmit}
+                                                        data-type="saveExit"
+                                                    >
+                                                        {formSettings.update
+                                                            .saveExit?.label ||
+                                                            'Save & Exit'}
+                                                    </button>
+                                                )}
+                                            </div>
+                                        );
+                                    } else {
+                                        return (
+                                            <div
+                                                className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
+                                            >
+                                                <button
+                                                    className={styles.btn}
+                                                    onClick={handleSubmit}
+                                                    data-type="save"
+                                                >
+                                                    Save
+                                                </button>
+                                            </div>
+                                        );
+                                    }
+                                })()}
                             </form>
                         </div>
                     </div>