@visns-studio/visns-components 5.7.18 → 5.7.19

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -32,6 +32,7 @@ import {
     ArrowCounterClockwise,
     ArrowCycle,
     Backspace,
+    BookOpen,
     Check,
     CircleCheck,
     CircleX,
@@ -1442,19 +1443,42 @@ const DataGrid = forwardRef(
             const addIcon = (src, icon, alt, tooltipContent, key) => {
                 if (src && src !== '') {
                     icons.push(
-                        <img
-                            src={`${assetPath}${src}`}
-                            alt={alt}
-                            data-tooltip-id="system-tooltip"
-                            data-tooltip-content={tooltipContent}
+                        <div
                             key={key}
-                        />
+                            style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                backgroundColor:
+                                    'var(--light-bg-color, #f5f5f5)',
+                                borderRadius: '4px',
+                                padding: '4px',
+                                width: '22px',
+                                height: '22px',
+                                boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+                                margin: '0 1px',
+                            }}
+                        >
+                            <img
+                                src={`${assetPath}${src}`}
+                                alt={alt}
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content={tooltipContent}
+                                style={{
+                                    maxHeight: '16px',
+                                    maxWidth: '16px',
+                                    objectFit: 'contain',
+                                }}
+                            />
+                        </div>
                     );
                 } else {
                     let IconComponent = null;
 
                     if (icon === 'archive') {
                         IconComponent = ShippingBoxV1;
+                    } else if (icon === 'bookOpen') {
+                        IconComponent = BookOpen;
                     } else if (icon === 'folder') {
                         IconComponent = Folder;
                     } else if (icon === 'inbox') {
@@ -1467,14 +1491,33 @@ const DataGrid = forwardRef(
 
                     if (IconComponent) {
                         icons.push(
-                            <IconComponent
-                                data-tooltip-id="system-tooltip"
-                                data-tooltip-content={tooltipContent}
-                                strokeWidth={2}
-                                size={18}
-                                className={styles.tdaction}
+                            <div
                                 key={key}
-                            />
+                                style={{
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    backgroundColor:
+                                        'var(--light-bg-color, #f5f5f5)',
+                                    borderRadius: '4px',
+                                    padding: '4px',
+                                    width: '22px',
+                                    height: '22px',
+                                    boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+                                    margin: '0 1px',
+                                }}
+                            >
+                                <IconComponent
+                                    data-tooltip-id="system-tooltip"
+                                    data-tooltip-content={tooltipContent}
+                                    strokeWidth={2}
+                                    size={18}
+                                    className={styles.tdaction}
+                                    style={{
+                                        color: 'var(--primary-color, #4a90e2)',
+                                    }}
+                                />
+                            </div>
                         );
                     }
                 }
@@ -1509,7 +1552,30 @@ const DataGrid = forwardRef(
                 }
             });
 
-            return icons;
+            // Return icons wrapped in a flex container for better layout
+            return (
+                <div
+                    style={{
+                        display: 'inline-flex', // Changed to inline-flex to keep icons in a single row
+                        flexWrap: 'nowrap', // Prevent wrapping
+                        alignItems: 'center',
+                        justifyContent: 'flex-start',
+                        gap: '1px', // Reduced gap since we have margins on the icons
+                        padding: '2px 0',
+                        minHeight: '24px',
+                        maxWidth: '100%',
+                        overflow: 'hidden', // Hide overflow if too many icons
+                    }}
+                >
+                    {icons.length > 0 ? (
+                        icons
+                    ) : (
+                        <span style={{ color: '#999', fontSize: '12px' }}>
+                            -
+                        </span>
+                    )}
+                </div>
+            );
         };
 
         /** Table Hooks */
@@ -3022,6 +3088,287 @@ const DataGrid = forwardRef(
                                         }
                                     },
                                 };
+                            case 'stageCounter':
+                                return {
+                                    ...commonProps,
+                                    name: column.id,
+                                    sortable: false,
+                                    render: ({ data }) => {
+                                        if (
+                                            data &&
+                                            column.stageConfig &&
+                                            column.stageConfig.key
+                                        ) {
+                                            // Check if the data has the specified key and it's an array
+                                            const stageData =
+                                                data[column.stageConfig.key];
+
+                                            if (
+                                                stageData &&
+                                                Array.isArray(stageData)
+                                            ) {
+                                                const stageCount =
+                                                    stageData.length;
+
+                                                // Create a clickable element if link is provided
+                                                const handleClick = (e) => {
+                                                    e.stopPropagation();
+                                                    e.preventDefault();
+
+                                                    if (
+                                                        column.link &&
+                                                        column.link.url &&
+                                                        column.link.key
+                                                    ) {
+                                                        navigate(
+                                                            `${
+                                                                column.link.url
+                                                            }${
+                                                                data[
+                                                                    column.link
+                                                                        .key
+                                                                ]
+                                                            }`
+                                                        );
+                                                    }
+                                                };
+
+                                                // Create an array of squares based on the stage data
+                                                const squares = [];
+                                                for (
+                                                    let i = 0;
+                                                    i < stageCount;
+                                                    i++
+                                                ) {
+                                                    // Get the stage item
+                                                    const stageItem =
+                                                        stageData[i];
+
+                                                    // Get the label value from the stage item using stageLabelKey if provided
+                                                    let labelValue = '';
+                                                    if (
+                                                        column.stageConfig
+                                                            .stageLabelKey &&
+                                                        stageItem &&
+                                                        stageItem[
+                                                            column.stageConfig
+                                                                .stageLabelKey
+                                                        ] !== undefined
+                                                    ) {
+                                                        // Get the value from the stage item
+                                                        const rawValue =
+                                                            stageItem[
+                                                                column
+                                                                    .stageConfig
+                                                                    .stageLabelKey
+                                                            ];
+
+                                                        // If it's an object with a name property, use that
+                                                        if (
+                                                            rawValue &&
+                                                            typeof rawValue ===
+                                                                'object' &&
+                                                            rawValue.name
+                                                        ) {
+                                                            labelValue =
+                                                                rawValue.name.charAt(
+                                                                    0
+                                                                );
+                                                        }
+                                                        // If it's a string, use the first character
+                                                        else if (
+                                                            typeof rawValue ===
+                                                                'string' &&
+                                                            rawValue.length > 0
+                                                        ) {
+                                                            labelValue =
+                                                                rawValue.charAt(
+                                                                    0
+                                                                );
+                                                        }
+                                                        // Otherwise use the raw value if it can be converted to string
+                                                        else if (
+                                                            rawValue !== null &&
+                                                            rawValue !==
+                                                                undefined
+                                                        ) {
+                                                            labelValue =
+                                                                String(
+                                                                    rawValue
+                                                                ).charAt(0);
+                                                        }
+                                                    }
+                                                    // If no stageLabelKey is provided or no value is found, leave it blank
+
+                                                    // Create tooltip content from the full value if available
+                                                    let tooltipContent = `Stage ${
+                                                        i + 1
+                                                    }`;
+                                                    if (
+                                                        column.stageConfig
+                                                            .stageLabelKey &&
+                                                        stageItem &&
+                                                        stageItem[
+                                                            column.stageConfig
+                                                                .stageLabelKey
+                                                        ]
+                                                    ) {
+                                                        const rawValue =
+                                                            stageItem[
+                                                                column
+                                                                    .stageConfig
+                                                                    .stageLabelKey
+                                                            ];
+                                                        if (
+                                                            rawValue &&
+                                                            typeof rawValue ===
+                                                                'object' &&
+                                                            rawValue.name
+                                                        ) {
+                                                            tooltipContent = `${
+                                                                rawValue.name
+                                                            } (Stage ${i + 1})`;
+                                                        } else if (
+                                                            rawValue !== null &&
+                                                            rawValue !==
+                                                                undefined
+                                                        ) {
+                                                            tooltipContent = `Stage ${
+                                                                i + 1
+                                                            })`;
+                                                        }
+                                                    }
+
+                                                    // Determine the background color based on stageColour configuration
+                                                    let backgroundColor =
+                                                        'var(--primary-color, #4a90e2)';
+
+                                                    if (
+                                                        column.stageConfig
+                                                            .stageColour &&
+                                                        column.stageConfig
+                                                            .stageColour.key &&
+                                                        column.stageConfig
+                                                            .stageColour
+                                                            .options &&
+                                                        stageItem
+                                                    ) {
+                                                        const colourKey =
+                                                            column.stageConfig
+                                                                .stageColour
+                                                                .key;
+                                                        const colourOptions =
+                                                            column.stageConfig
+                                                                .stageColour
+                                                                .options;
+
+                                                        // Get the value for the color key
+                                                        if (
+                                                            stageItem[
+                                                                colourKey
+                                                            ] !== undefined
+                                                        ) {
+                                                            const keyValue =
+                                                                stageItem[
+                                                                    colourKey
+                                                                ];
+
+                                                            // Find matching option
+                                                            const matchingOption =
+                                                                colourOptions.find(
+                                                                    (
+                                                                        option
+                                                                    ) => {
+                                                                        // Handle both direct value and object with id
+                                                                        if (
+                                                                            typeof keyValue ===
+                                                                                'object' &&
+                                                                            keyValue !==
+                                                                                null
+                                                                        ) {
+                                                                            // Use loose equality (==) to handle type coercion between string and number
+                                                                            return (
+                                                                                keyValue.id ==
+                                                                                option.id
+                                                                            );
+                                                                        }
+                                                                        // Use loose equality (==) to handle type coercion between string and number
+                                                                        return (
+                                                                            keyValue ==
+                                                                            option.id
+                                                                        );
+                                                                    }
+                                                                );
+
+                                                            // Use the color from the matching option if found
+                                                            if (
+                                                                matchingOption &&
+                                                                matchingOption.colour
+                                                            ) {
+                                                                backgroundColor =
+                                                                    matchingOption.colour;
+                                                            }
+                                                        }
+                                                    }
+
+                                                    squares.push(
+                                                        <div
+                                                            key={i}
+                                                            style={{
+                                                                width: '20px',
+                                                                height: '20px',
+                                                                backgroundColor:
+                                                                    backgroundColor,
+                                                                borderRadius:
+                                                                    '3px',
+                                                                margin: '0 2px',
+                                                                display: 'flex',
+                                                                justifyContent:
+                                                                    'center',
+                                                                alignItems:
+                                                                    'center',
+                                                                color: 'white',
+                                                                fontSize:
+                                                                    '11px',
+                                                                fontWeight:
+                                                                    'bold',
+                                                            }}
+                                                            data-tooltip-id="system-tooltip"
+                                                            data-tooltip-content={
+                                                                tooltipContent
+                                                            }
+                                                        >
+                                                            {labelValue}
+                                                        </div>
+                                                    );
+                                                }
+
+                                                return (
+                                                    <div
+                                                        onClick={handleClick}
+                                                        style={{
+                                                            display: 'flex',
+                                                            flexWrap: 'wrap',
+                                                            justifyContent:
+                                                                'center',
+                                                            alignItems:
+                                                                'center',
+                                                            cursor: column.link
+                                                                ? 'pointer'
+                                                                : 'default',
+                                                            gap: '4px',
+                                                            padding: '2px 0',
+                                                            maxWidth: '100%',
+                                                        }}
+                                                    >
+                                                        {squares}
+                                                    </div>
+                                                );
+                                            }
+                                        }
+                                        return null;
+                                    },
+                                };
                             case 'url':
                                 return {
                                     ...commonProps,