@visns-studio/visns-components 5.13.5 → 5.13.7

package/package.json

@@ -24,19 +24,20 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.23.0",
+        "framer-motion": "^12.23.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.525.0",
         "moment": "^2.30.1",
-        "motion": "^12.23.0",
+        "motion": "^12.23.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
         "react-big-calendar": "^1.19.4",
         "react-copy-to-clipboard": "^5.1.0",
+        "react-currency-input-field": "^3.10.0",
         "react-datepicker": "^8.4.0",
         "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
@@ -87,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.13.5",
+    "version": "5.13.7",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -114,6 +114,7 @@ import {
     renderDateRangeColumn,
     renderStageCounterColumn,
     renderGalleryColumn,
+    renderTotalColumn,
 } from './columns/ColumnRenderers.jsx';
 import _ from 'lodash';
 
@@ -2720,6 +2721,11 @@ const DataGrid = forwardRef(
                                     setLocalInputValues,
                                     handleInputUpdate,
                                 });
+                            case 'total':
+                                return renderTotalColumn()({
+                                    column,
+                                    commonProps,
+                                });
                             default:
                                 columnId = Array.isArray(column.id)
                                     ? column.id.join('-')

package/src/components/columns/ColumnRenderers.jsx

@@ -2472,3 +2472,52 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate, onUpda
         },
     };
 };
+
+// Calculate total for columns of type 'total'
+const calculateTotal = (entry, keys) => {
+    let total = 0;
+    if (Array.isArray(keys)) {
+        total = keys.reduce(
+            (sum, key) => sum + (parseFloat(entry[key]) || 0),
+            0
+        );
+    } else if (
+        keys &&
+        typeof keys === 'object' &&
+        keys.price &&
+        keys.unit
+    ) {
+        const { price: priceKeys, unit: unitKeys } = keys;
+        if (unitKeys.length === 1) {
+            const unitValue = parseFloat(entry[unitKeys[0]]) || 0;
+            total = priceKeys.reduce(
+                (sum, key) =>
+                    sum + (parseFloat(entry[key]) || 0) * unitValue,
+                0
+            );
+        } else if (priceKeys.length === unitKeys.length) {
+            total = priceKeys.reduce(
+                (sum, key, index) =>
+                    sum +
+                    (parseFloat(entry[key]) || 0) *
+                        (parseFloat(entry[unitKeys[index]]) || 0),
+                0
+            );
+        }
+    }
+    return total;
+};
+
+
+export const renderTotalColumn = () => {
+    return {
+        render: ({ data: rowData, column }) => {
+            // For individual rows, calculate the total for that specific row
+            const subtotal = calculateTotal(rowData, column.keys);
+            return new Intl.NumberFormat('en-AU', {
+                style: 'currency',
+                currency: 'AUD',
+            }).format(subtotal);
+        },
+    };
+};

package/src/components/generic/GenericEditableTable.jsx

@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import { Trash2, ArrowUp, ArrowDown, Copy, Droplets } from 'lucide-react';
 import { Compact } from '@uiw/react-color';
 import { confirmDialog } from '../utils/ConfirmDialog';
+import CurrencyInput from 'react-currency-input-field';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
@@ -419,6 +420,18 @@ const GenericEditableTable = ({
         return totalProjectCost * (percentage / 100);
     };
 
+    // Check if row matches where conditions
+    const matchesWhereConditions = (row, whereConditions) => {
+        if (!whereConditions || !Array.isArray(whereConditions)) {
+            return true;
+        }
+        
+        return whereConditions.every(condition => {
+            const { id, value } = condition;
+            return row[id] === value;
+        });
+    };
+
     // Calculate total for columns of type 'total'
     const calculateTotal = (entry, keys) => {
         let total = 0;
@@ -454,6 +467,19 @@ const GenericEditableTable = ({
         return total;
     };
 
+    // Calculate total across all data with where clause filtering
+    const calculateTotalFromData = (data, keys, whereConditions) => {
+        if (!data || !Array.isArray(data)) {
+            return 0;
+        }
+        
+        const filteredData = data.filter(row => matchesWhereConditions(row, whereConditions));
+        
+        return filteredData.reduce((sum, entry) => {
+            return sum + calculateTotal(entry, keys);
+        }, 0);
+    };
+
     // Debounced update to save entire dataSets array
     const debouncedUpdate = useMemo(
         () =>
@@ -895,6 +921,27 @@ const GenericEditableTable = ({
                 // For other colour columns, picker is rendered in the action column
                 return null;
             case 'currency':
+                return (
+                    <CurrencyInput
+                        id={`currency-${column.id}-${keyCounter}`}
+                        name={column.id}
+                        placeholder="$0.00"
+                        defaultValue={entry[column.id] || ''}
+                        decimalsLimit={2}
+                        prefix="$"
+                        decimalSeparator="."
+                        groupSeparator=","
+                        onValueChange={(value) =>
+                            handleFieldChange(
+                                value || '',
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                        style={{ textAlign: 'right', width: '100%' }}
+                        readOnly={column.readOnly || false}
+                    />
+                );
             case 'number':
                 return (
                     <input
@@ -1051,6 +1098,26 @@ const GenericEditableTable = ({
                 // For other colour columns, picker is rendered in the action column
                 return null;
             case 'currency':
+                return (
+                    <CurrencyInput
+                        id={`new-currency-${column.id}-${groupId || 'default'}`}
+                        name={column.id}
+                        placeholder="$0.00"
+                        defaultValue={value || ''}
+                        decimalsLimit={2}
+                        prefix="$"
+                        decimalSeparator="."
+                        groupSeparator=","
+                        onValueChange={(value) =>
+                            handleNewFieldChange(
+                                value || '',
+                                column.id,
+                                groupId
+                            )
+                        }
+                        style={{ textAlign: 'right', width: '100%' }}
+                    />
+                );
             case 'number':
                 return (
                     <input
@@ -1594,18 +1661,19 @@ const GenericEditableTable = ({
                                                     );
                                                 }
                                                 if (index === totalColIndex) {
+                                                    const totalColumn = columns[totalColIndex];
                                                     const groupTotal =
-                                                        group.entries.reduce(
-                                                            (sum, entry) =>
-                                                                sum +
-                                                                calculateTotal(
-                                                                    entry,
-                                                                    columns[
-                                                                        totalColIndex
-                                                                    ].keys
-                                                                ),
-                                                            0
-                                                        );
+                                                        group.entries
+                                                            .filter(entry => matchesWhereConditions(entry, totalColumn.where))
+                                                            .reduce(
+                                                                (sum, entry) =>
+                                                                    sum +
+                                                                    calculateTotal(
+                                                                        entry,
+                                                                        totalColumn.keys
+                                                                    ),
+                                                                0
+                                                            );
                                                     return (
                                                         <td key={col.id}>
                                                             {groupTotal.toLocaleString(
@@ -1749,17 +1817,18 @@ const GenericEditableTable = ({
                                             );
                                         }
                                         if (index === totalColIndex) {
+                                            const totalColumn = columns[totalColIndex];
                                             const overallTotal =
                                                 sortBySortOrder(
                                                     localData
-                                                ).reduce(
+                                                )
+                                                .filter(entry => matchesWhereConditions(entry, totalColumn.where))
+                                                .reduce(
                                                     (sum, entry) =>
                                                         sum +
                                                         calculateTotal(
                                                             entry,
-                                                            columns[
-                                                                totalColIndex
-                                                            ].keys
+                                                            totalColumn.keys
                                                         ),
                                                     0
                                                 );