@visns-studio/visns-components 5.13.0 → 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.13.0",
+    "version": "5.13.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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) =>
@@ -311,48 +375,58 @@ const GenericEditableTable = ({
         if (column.type === 'dropdown' && column.options) {
             const selectedValue = entry[column.id];
             if (!selectedValue) return undefined;
-            
-            // Debug logging
-            console.log('GenericEditableTable dropdown debug:', {
-                columnId: column.id,
-                selectedValue,
-                columnOptions: column.options
-            });
-            
-            const selectedOption = column.options.find(option => option.id === selectedValue);
-            console.log('Found selected option:', selectedOption);
-            
+
+            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'))
+            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);
-                    console.log('Total column using status color:', {
-                        totalColumnId: column.id,
-                        statusColumnId: statusColumn.id,
-                        statusValue,
-                        statusOption
-                    });
+                    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) => {
@@ -1111,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;
@@ -1292,7 +1486,11 @@ const GenericEditableTable = ({
                                         >
                                             {renderRowCheckbox(entry)}
                                             {columns.map((column) => {
-                                                const cellBgColor = getCellBackground(entry, column);
+                                                const cellBgColor =
+                                                    getCellBackground(
+                                                        entry,
+                                                        column
+                                                    );
                                                 return (
                                                     <td
                                                         key={column.id}
@@ -1302,8 +1500,11 @@ const GenericEditableTable = ({
                                                                 'currency'
                                                                     ? 'right'
                                                                     : 'left',
-                                                            backgroundColor: cellBgColor,
-                                                            color: cellBgColor ? '#000' : 'inherit',
+                                                            backgroundColor:
+                                                                cellBgColor,
+                                                            color: cellBgColor
+                                                                ? '#000'
+                                                                : 'inherit',
                                                         }}
                                                     >
                                                         {renderScheduledTableField(
@@ -1446,6 +1647,9 @@ const GenericEditableTable = ({
                                     )}
                                 </React.Fragment>
                             ))}
+
+                            {/* Render Builder Margin row */}
+                            {renderMarginRow()}
                         </tbody>
                     </table>
                 ) : (
@@ -1474,18 +1678,26 @@ const GenericEditableTable = ({
                                 >
                                     {renderRowCheckbox(entry)}
                                     {columns.map((column) => {
-                                        const cellBgColor = getCellBackground(entry, column);
+                                        const cellBgColor = getCellBackground(
+                                            entry,
+                                            column
+                                        );
                                         return (
                                             <td
                                                 key={column.id}
                                                 style={{
-                                                    width: column.width || 'auto',
+                                                    width:
+                                                        column.width || 'auto',
                                                     textAlign:
-                                                        column.type === 'currency'
+                                                        column.type ===
+                                                        'currency'
                                                             ? 'right'
                                                             : 'left',
-                                                    backgroundColor: cellBgColor,
-                                                    color: cellBgColor ? '#000' : 'inherit',
+                                                    backgroundColor:
+                                                        cellBgColor,
+                                                    color: cellBgColor
+                                                        ? '#000'
+                                                        : 'inherit',
                                                 }}
                                             >
                                                 {renderScheduledTableField(
@@ -1600,6 +1812,9 @@ const GenericEditableTable = ({
                                     <td></td>
                                 </tr>
                             )}
+
+                        {/* Render Builder Margin row */}
+                        {renderMarginRow()}
                     </tbody>
                 </table>
             )}