@visns-studio/visns-components 5.12.16 → 5.13.1

package/README.md

@@ -36,6 +36,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **Dropzone** - File upload with drag and drop support
 -   **AsyncSelect** - Asynchronous data loading for select components
 -   **Creatable Select** - Select components that allow creating new options
+-   **GenericEditableTable** - Interactive table component with inline editing, color-coded columns, and multiple data types
 
 ### Navigation
 
@@ -328,9 +329,10 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 - `currency` - Formatted monetary values
 - `date` - Date formatting with validation
 - `datetime` - Date and time formatting
+- `html5_date` - HTML5 native date picker input
 - `arrayCount` - Count of array elements
 - `colour` - Color picker display
-- `dropdown` - Interactive dropdown selections
+- `dropdown` - Interactive dropdown selections with optional background color support
 - `image` - Image display from file URLs
 - `file` - File download links with icons
 - `icons` - Multiple icon display
@@ -355,6 +357,79 @@ The DataGrid component utilizes a modular column renderer system with 28 special
 
 All column renderers are exported from `@visns-studio/visns-components` and can be used individually or as part of the DataGrid component.
 
+#### Dropdown Column Color Support
+
+The dropdown column type now supports automatic background color application based on the selected option's `colour` property. This feature works in both DataGrid and GenericEditableTable components.
+
+**Configuration Example:**
+```jsx
+{
+    id: 'status',
+    label: 'Status',
+    type: 'dropdown',
+    options: [
+        { id: 'Pending', label: 'Pending', colour: '#FFE5B4' },
+        { id: 'Approved', label: 'Approved', colour: '#B4E5D1' },
+        { id: 'Rejected', label: 'Rejected', colour: '#FFCDD2' },
+        { id: 'Disputed', label: 'Disputed', colour: '#E1F5FE' }
+    ],
+    width: '10%'
+}
+```
+
+**Features:**
+- **Automatic Color Application**: Cells automatically display the background color of the selected option
+- **Total Column Integration**: Total columns inherit the same background color as the status column in the same row
+- **Consistent Styling**: Black text color is automatically applied for optimal contrast
+- **Flexible Configuration**: Works with both static column options and dynamic dropdown data
+- **Cross-Component Support**: Available in both DataGrid and GenericEditableTable components
+
+**Example Usage in GenericEditableTable:**
+```jsx
+<GenericEditableTable
+    schedulingConfig={{
+        columns: [
+            {
+                id: 'status',
+                label: 'Status',
+                type: 'dropdown',
+                options: [
+                    { id: 'Pending', label: 'Pending', colour: '#FFE5B4' },
+                    { id: 'Approved', label: 'Approved', colour: '#B4E5D1' }
+                ]
+            },
+            {
+                id: 'total',
+                label: 'Total',
+                type: 'total',
+                keys: ['amount', 'tax'] // Will inherit status color
+            }
+        ]
+    }}
+/>
+```
+
+#### HTML5 Date Type
+
+The `html5_date` column type provides native HTML5 date picker functionality in GenericEditableTable components.
+
+**Features:**
+- **Native Date Picker**: Uses browser's built-in date picker for consistent UX
+- **Cross-browser Support**: Works across all modern browsers
+- **Consistent Styling**: Matches existing date field styling
+- **Read-only Support**: Respects column read-only configuration
+- **Change Integration**: Fully integrated with existing field change handlers
+
+**Configuration Example:**
+```jsx
+{
+    id: 'start_date',
+    label: 'Start Date',
+    type: 'html5_date',
+    width: '15%'
+}
+```
+
 #### Intelligent Relationship Sorting
 
 The DataGrid component includes intelligent sorting capabilities that automatically detect and enable sorting for relationship and JSON fields. This feature works seamlessly with the backend `HasRelationshipSorting` trait.
@@ -629,6 +704,12 @@ You can add summary calculations to grouped data:
 
 The DataGrid component now supports powerful bulk editing capabilities through group-based operations, allowing users to efficiently manage multiple items simultaneously.
 
+**New in v5.13.0:**
+- **Dropdown Column Color Support**: Automatic background color application for dropdown columns based on option colors
+- **Total Column Color Integration**: Total columns now inherit background colors from associated status columns
+- **HTML5 Date Type**: Added native HTML5 date picker support for GenericEditableTable components
+- **Enhanced GenericEditableTable**: Improved column type support and consistent styling across components
+
 #### How Group Bulk Edit Works
 
 When data is grouped using the `groupBy` or `defaultGroupBy` properties, each group header can display action icons for common operations. The new bulk edit functionality adds an "edit" icon that opens a form modal for updating all items in the group simultaneously.

package/package.json

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

package/src/components/columns/ColumnRenderers.jsx

@@ -354,8 +354,14 @@ export const renderDropdownColumn = ({
             return (
                 <select
                     name={column.id}
-                    value={data[column.id]?.id || ''}
-                    style={{ padding: '7px' }}
+                    value={data[column.id]?.id || data[column.id] || ''}
+                    style={{ 
+                        padding: '7px',
+                        width: '100%',
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        outline: 'none',
+                    }}
                     onChange={(e) => {
                         e.preventDefault();
 
@@ -384,10 +390,55 @@ export const renderDropdownColumn = ({
                                   {option.label}
                               </option>
                           ))
+                        : column.options && column.options.length > 0
+                        ? column.options.map((option, index) => (
+                              <option value={option.id} key={index}>
+                                  {option.label}
+                              </option>
+                          ))
                         : null}
                 </select>
             );
         },
+        cellProps: ({ data }) => {
+            // Find the selected option to get its color
+            const selectedValue = data[column.id]?.id || data[column.id] || '';
+            let selectedOption = null;
+            
+            // Debug logging
+            console.log('Dropdown cellProps debug:', {
+                columnId: column.id,
+                selectedValue,
+                dataValue: data[column.id],
+                dropdownData: dropdownData[column.id],
+                columnOptions: column.options
+            });
+            
+            if (selectedValue && dropdownData[column.id]) {
+                selectedOption = dropdownData[column.id].find(option => option.id === selectedValue);
+                console.log('Found option in dropdownData:', selectedOption);
+            }
+            
+            // If no option found in dropdownData, check if column has options array
+            if (!selectedOption && selectedValue && column.options) {
+                selectedOption = column.options.find(option => option.id === selectedValue);
+                console.log('Found option in column.options:', selectedOption);
+            }
+            
+            // Return cell props with background color
+            if (selectedOption?.colour) {
+                console.log('Applying background color:', selectedOption.colour);
+                return {
+                    style: {
+                        backgroundColor: selectedOption.colour,
+                        color: '#000',
+                    }
+                };
+            }
+            
+            console.log('No color found, returning empty props');
+            return {};
+        },
     };
 };
 

package/src/components/generic/GenericEditableTable.jsx

@@ -214,6 +214,7 @@ const GenericEditableTable = ({
     const { columns, rows, form, title } = schedulingConfig;
     const hasCategory = rows && rows.categoryKey; // Only group if defined
     const hasColourColumn = columns.some((col) => col.id === 'colours');
+    const hasMarginRow = rows && rows.marginRow;
 
     // dataSets: each item => { created_at: string, data: array of rows }
     const [dataSets, setDataSets] = useState([]);
@@ -228,6 +229,59 @@ const GenericEditableTable = ({
     // Row selection state for copy functionality
     const [selectedRows, setSelectedRows] = useState(new Set());
 
+    // Margin percentage state for Builder Margin row
+    const [marginPercentage, setMarginPercentage] = useState(0);
+
+    // Handle margin percentage change
+    const handleMarginPercentageChange = (percentage) => {
+        setMarginPercentage(percentage);
+
+        // Update or create margin row in localData
+        setLocalData((prevData) => {
+            const updatedData = [...prevData];
+            const marginRowIndex = updatedData.findIndex(
+                (entry) => entry.description === rows.marginRow
+            );
+
+            const totalProjectCost = calculateTotalProjectCost(updatedData);
+            const marginAmount = calculateMarginAmount(
+                totalProjectCost,
+                percentage
+            );
+
+            const marginRowData = {
+                id: 'margin-row',
+                description: rows.marginRow,
+                category: rows.marginRow,
+                sort_order: 9999, // Ensure it's always at the bottom
+                margin_percentage: percentage,
+                [columns.find((col) => col.type === 'total')?.id]: marginAmount,
+            };
+
+            if (marginRowIndex !== -1) {
+                // Update existing margin row
+                updatedData[marginRowIndex] = {
+                    ...updatedData[marginRowIndex],
+                    ...marginRowData,
+                };
+            } else {
+                // Add new margin row
+                updatedData.push(marginRowData);
+            }
+
+            // Update the active dataset
+            const updatedDataSets = [...dataSets];
+            updatedDataSets[activeDatasetIndex] = {
+                ...updatedDataSets[activeDatasetIndex],
+                data: updatedData,
+            };
+            setDataSets(updatedDataSets);
+            debouncedUpdate(updatedDataSets);
+
+            return updatedData;
+        });
+    };
+
     // On mount or when 'data' changes, read from data[schedulingConfig.rows.key] and handle both new & old formats
     useEffect(() => {
         const raw = data && data[schedulingConfig.rows.key];
@@ -287,12 +341,22 @@ const GenericEditableTable = ({
                 sort_order: entry.sort_order ?? index + 1,
             }));
             setLocalData(sortBySortOrder(enrichedData));
+
+            // Initialize margin percentage from existing margin row
+            if (hasMarginRow) {
+                const marginRow = enrichedData.find(
+                    (entry) => entry.description === rows.marginRow
+                );
+                if (marginRow && marginRow.margin_percentage) {
+                    setMarginPercentage(marginRow.margin_percentage);
+                }
+            }
         } else {
             setLocalData([]);
         }
         // Clear selected rows when dataset changes
         setSelectedRows(new Set());
-    }, [dataSets, activeDatasetIndex]);
+    }, [dataSets, activeDatasetIndex, hasMarginRow, rows.marginRow]);
 
     // Helper to sort by sort_order
     const sortBySortOrder = (dataArray) =>
@@ -305,6 +369,65 @@ const GenericEditableTable = ({
         return coloursValue ? `${coloursValue}40` : undefined; // Add 40% opacity
     };
 
+    // Helper function to get background color for dropdown and total cells
+    const getCellBackground = (entry, column) => {
+        // For dropdown columns, get color from selected option
+        if (column.type === 'dropdown' && column.options) {
+            const selectedValue = entry[column.id];
+            if (!selectedValue) return undefined;
+
+            const selectedOption = column.options.find(
+                (option) => option.id === selectedValue
+            );
+
+            return selectedOption?.colour || undefined;
+        }
+
+        // For total columns, look for a status column with color information
+        if (column.type === 'total') {
+            // Find the status column (typically named 'status' and has dropdown type with options)
+            const statusColumn = columns.find(
+                (col) =>
+                    col.type === 'dropdown' &&
+                    col.options &&
+                    col.options.some((option) => option.colour) &&
+                    (col.id === 'status' ||
+                        col.id.toLowerCase().includes('status'))
+            );
+
+            if (statusColumn) {
+                const statusValue = entry[statusColumn.id];
+                if (statusValue) {
+                    const statusOption = statusColumn.options.find(
+                        (option) => option.id === statusValue
+                    );
+                    return statusOption?.colour || undefined;
+                }
+            }
+        }
+
+        return undefined;
+    };
+
+    // Calculate total project cost (sum of all entries excluding margin row)
+    const calculateTotalProjectCost = (dataEntries) => {
+        const totalColIndex = columns.findIndex((c) => c.type === 'total');
+        if (totalColIndex === -1) return 0;
+
+        const totalColumn = columns[totalColIndex];
+        return dataEntries
+            .filter((entry) => entry.description !== rows.marginRow) // Exclude margin row
+            .reduce(
+                (sum, entry) => sum + calculateTotal(entry, totalColumn.keys),
+                0
+            );
+    };
+
+    // Calculate margin amount based on percentage
+    const calculateMarginAmount = (totalProjectCost, percentage) => {
+        return totalProjectCost * (percentage / 100);
+    };
+
     // Calculate total for columns of type 'total'
     const calculateTotal = (entry, keys) => {
         let total = 0;
@@ -813,6 +936,22 @@ const GenericEditableTable = ({
                         readOnly={column.readOnly || false}
                     />
                 );
+            case 'html5_date':
+                return (
+                    <input
+                        type="date"
+                        value={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                        readOnly={column.readOnly || false}
+                    />
+                );
             case 'dropdown':
                 return (
                     <select
@@ -951,6 +1090,21 @@ const GenericEditableTable = ({
                         style={{ textAlign: 'right' }}
                     />
                 );
+            case 'html5_date':
+                return (
+                    <input
+                        type="date"
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
             case 'dropdown':
                 return (
                     <select
@@ -1031,6 +1185,126 @@ const GenericEditableTable = ({
         }
     };
 
+    // Render Builder Margin row - should appear after all categories
+    const renderMarginRow = () => {
+        if (!hasMarginRow) return null;
+
+        const totalProjectCost = calculateTotalProjectCost(localData);
+        const marginAmount = calculateMarginAmount(
+            totalProjectCost,
+            marginPercentage
+        );
+        const totalWithMargin = totalProjectCost + marginAmount;
+
+        return (
+            <>
+                {/* Margin row category header */}
+                <tr className={styles.categoryRow}>
+                    <td
+                        colSpan={columns.length + 2}
+                        style={{
+                            backgroundColor: '#e9ecef',
+                            fontWeight: 'bold',
+                            padding: '8px 12px',
+                        }}
+                    >
+                        {rows.marginRow}
+                    </td>
+                </tr>
+
+                {/* Margin row column headers - only show Description, Margin %, and Total */}
+                <tr>
+                    {/* Description column - larger width */}
+                    <th
+                        style={{
+                            color: 'white',
+                            fontWeight: 'bold',
+                            padding: '8px',
+                            textAlign: 'left',
+                            width: '60%',
+                        }}
+                        colSpan={6}
+                    >
+                        Description
+                    </th>
+                    {/* Margin % column - smaller width */}
+                    <th
+                        style={{
+                            color: 'white',
+                            fontWeight: 'bold',
+                            padding: '8px',
+                            textAlign: 'left',
+                            width: '20%',
+                        }}
+                        colSpan={3}
+                    >
+                        Margin %
+                    </th>
+                    {/* Total column */}
+                    <th
+                        style={{
+                            color: 'white',
+                            fontWeight: 'bold',
+                            padding: '8px',
+                            textAlign: 'right',
+                            width: '20%',
+                        }}
+                    >
+                        Total
+                    </th>
+                    <th></th>
+                </tr>
+
+                {/* Margin row content */}
+                <tr style={{ backgroundColor: '#f8f9fa' }}>
+                    {/* Description */}
+                    <td
+                        style={{ fontWeight: 'bold', padding: '8px' }}
+                        colSpan={6}
+                    >
+                        {rows.marginRow}
+                    </td>
+                    {/* Margin % input */}
+                    <td
+                        style={{ textAlign: 'center', padding: '8px' }}
+                        colSpan={3}
+                    >
+                        <input
+                            type="number"
+                            value={marginPercentage}
+                            onChange={(e) =>
+                                handleMarginPercentageChange(
+                                    parseFloat(e.target.value) || 0
+                                )
+                            }
+                            placeholder="% margin"
+                            style={{
+                                width: '80px',
+                                padding: '6px',
+                                border: '1px solid #ccc',
+                                borderRadius: '3px',
+                            }}
+                        />
+                    </td>
+                    {/* Total (subtotal of all categories + margin) */}
+                    <td
+                        style={{
+                            textAlign: 'right',
+                            fontWeight: 'bold',
+                            padding: '8px',
+                        }}
+                    >
+                        {totalWithMargin.toLocaleString('en-AU', {
+                            style: 'currency',
+                            currency: 'AUD',
+                        })}
+                    </td>
+                    <td></td>
+                </tr>
+            </>
+        );
+    };
+
     // Inline form for adding a new row
     const renderNewRowForm = (groupId = null) => {
         const newRowData = hasCategory ? newEntries[groupId] || {} : newEntry;
@@ -1211,24 +1485,36 @@ const GenericEditableTable = ({
                                             }}
                                         >
                                             {renderRowCheckbox(entry)}
-                                            {columns.map((column) => (
-                                                <td
-                                                    key={column.id}
-                                                    style={{
-                                                        textAlign:
-                                                            column.type ===
-                                                            'currency'
-                                                                ? 'right'
-                                                                : 'left',
-                                                    }}
-                                                >
-                                                    {renderScheduledTableField(
+                                            {columns.map((column) => {
+                                                const cellBgColor =
+                                                    getCellBackground(
                                                         entry,
-                                                        column,
-                                                        entry.keyCounter
-                                                    )}
-                                                </td>
-                                            ))}
+                                                        column
+                                                    );
+                                                return (
+                                                    <td
+                                                        key={column.id}
+                                                        style={{
+                                                            textAlign:
+                                                                column.type ===
+                                                                'currency'
+                                                                    ? 'right'
+                                                                    : 'left',
+                                                            backgroundColor:
+                                                                cellBgColor,
+                                                            color: cellBgColor
+                                                                ? '#000'
+                                                                : 'inherit',
+                                                        }}
+                                                    >
+                                                        {renderScheduledTableField(
+                                                            entry,
+                                                            column,
+                                                            entry.keyCounter
+                                                        )}
+                                                    </td>
+                                                );
+                                            })}
                                             <td>
                                                 <div
                                                     className={styles.tdactions}
@@ -1361,6 +1647,9 @@ const GenericEditableTable = ({
                                     )}
                                 </React.Fragment>
                             ))}
+
+                            {/* Render Builder Margin row */}
+                            {renderMarginRow()}
                         </tbody>
                     </table>
                 ) : (
@@ -1388,36 +1677,39 @@ const GenericEditableTable = ({
                                     }}
                                 >
                                     {renderRowCheckbox(entry)}
-                                    {columns.map((column) => (
-                                        <td
-                                            key={column.id}
-                                            style={{
-                                                width: column.width || 'auto',
-                                                textAlign:
-                                                    column.type === 'currency'
-                                                        ? 'right'
-                                                        : 'left',
-                                            }}
-                                        >
-                                            {renderScheduledTableField(
-                                                entry,
-                                                column,
-                                                idx
-                                            )}
-                                        </td>
-                                    ))}
+                                    {columns.map((column) => {
+                                        const cellBgColor = getCellBackground(
+                                            entry,
+                                            column
+                                        );
+                                        return (
+                                            <td
+                                                key={column.id}
+                                                style={{
+                                                    width:
+                                                        column.width || 'auto',
+                                                    textAlign:
+                                                        column.type ===
+                                                        'currency'
+                                                            ? 'right'
+                                                            : 'left',
+                                                    backgroundColor:
+                                                        cellBgColor,
+                                                    color: cellBgColor
+                                                        ? '#000'
+                                                        : 'inherit',
+                                                }}
+                                            >
+                                                {renderScheduledTableField(
+                                                    entry,
+                                                    column,
+                                                    idx
+                                                )}
+                                            </td>
+                                        );
+                                    })}
                                     <td>
                                         <div className={styles.tdactions}>
-                                            {!hasColourColumn && (
-                                                <ColourPicker
-                                                    value={
-                                                        entry.row_colour || ''
-                                                    }
-                                                    columnId={'row_colour'}
-                                                    keyCounter={idx}
-                                                    onChange={handleFieldChange}
-                                                />
-                                            )}
                                             {idx > 0 && (
                                                 <Tooltip text="Move up">
                                                     <ArrowUp
@@ -1520,6 +1812,9 @@ const GenericEditableTable = ({
                                     <td></td>
                                 </tr>
                             )}
+
+                        {/* Render Builder Margin row */}
+                        {renderMarginRow()}
                     </tbody>
                 </table>
             )}