@visns-studio/visns-components 5.1.23 → 5.1.25

package/package.json

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

package/src/components/crm/generic/GenericEditableTable.jsx

@@ -15,7 +15,6 @@ import styles from './styles/GenericEditableTable.module.scss';
 // Updated ColourPicker with an expanded pastel palette and a refined Akar icon
 const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
     const [colorPickerShow, setColorPickerShow] = useState(false);
-    const colorPickerRef = useRef(null);
     const buttonRef = useRef(null);
     const popoverRef = useRef(null);
 
@@ -54,20 +53,23 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
         ? buttonRef.current.getBoundingClientRect()
         : {};
 
+    const handleClear = () => {
+        // Passing an empty string to represent "no colour selected"
+        onChange('', columnId, keyCounter);
+        setColorPickerShow(false);
+    };
+
     return (
         <div className={styles.cpicker}>
-            <div className={styles.cpicker__btn} ref={colorPickerRef}>
+            <div className={styles.cpicker__btn}>
                 <button
                     ref={buttonRef}
-                    style={
-                        value && value !== 'null' ? { background: value } : {}
-                    }
+                    style={value ? { background: value } : {}}
                     onClick={(e) => {
                         e.preventDefault();
                         setColorPickerShow(!colorPickerShow);
                     }}
                 >
-                    {/* Using the Akar Water icon with increased size and some margin */}
                     <Water size={20} style={{ color: 'black' }} />
                 </button>
 
@@ -87,14 +89,29 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
                                 className={styles.colour_cover}
                                 onClick={() => setColorPickerShow(false)}
                             />
-                            <CompactPicker
-                                color={value || ''}
-                                colors={pastelColors}
-                                onChangeComplete={(color) => {
-                                    onChange(color.hex, columnId, keyCounter);
-                                    setColorPickerShow(false);
-                                }}
-                            />
+                            <div className={styles.pickerContainer}>
+                                <CompactPicker
+                                    color={value || ''}
+                                    colors={pastelColors}
+                                    onChangeComplete={(color) => {
+                                        onChange(
+                                            color.hex,
+                                            columnId,
+                                            keyCounter
+                                        );
+                                        setColorPickerShow(false);
+                                    }}
+                                />
+                                {/* Extra clear button added below the CompactPicker */}
+                                <div className={styles.clearContainer}>
+                                    <button
+                                        onClick={handleClear}
+                                        className={styles.clearButton}
+                                    >
+                                        Clear
+                                    </button>
+                                </div>
+                            </div>
                         </div>,
                         document.body
                     )}
@@ -107,14 +124,16 @@ const GenericEditableTable = ({
     schedulingConfig,
     data,
     dataId,
-    modalOpen,
     preloadedOptions,
     setData,
 }) => {
-    const { columns, rows, form } = schedulingConfig;
+    const { columns, rows, form, title } = schedulingConfig;
     const hasCategory = rows && rows.categoryKey; // Only group if defined
 
     const [localData, setLocalData] = useState([]);
+    // For new (unsaved) entries: if grouped, store per group; if not, a single object.
+    const [newEntries, setNewEntries] = useState({});
+    const [newEntry, setNewEntry] = useState({});
 
     // Determine if a total column exists and its index.
     const totalColumnIndex = columns.findIndex((col) => col.type === 'total');
@@ -135,7 +154,6 @@ const GenericEditableTable = ({
     const calculateTotal = (entry, keys) => {
         let total = 0;
         if (Array.isArray(keys)) {
-            // Legacy format: simply sum up the values.
             total = keys.reduce(
                 (sum, key) => sum + (parseFloat(entry[key]) || 0),
                 0
@@ -148,7 +166,6 @@ const GenericEditableTable = ({
         ) {
             const priceKeys = keys.price;
             const unitKeys = keys.unit;
-            // If there's one unit key, use its value for all price keys.
             if (unitKeys.length === 1) {
                 const unitValue = parseFloat(entry[unitKeys[0]]) || 0;
                 total = priceKeys.reduce(
@@ -156,9 +173,7 @@ const GenericEditableTable = ({
                         sum + (parseFloat(entry[key]) || 0) * unitValue,
                     0
                 );
-            }
-            // Otherwise, if both arrays have the same length, multiply pair‑wise.
-            else if (priceKeys.length === unitKeys.length) {
+            } else if (priceKeys.length === unitKeys.length) {
                 total = priceKeys.reduce(
                     (sum, key, index) =>
                         sum +
@@ -219,8 +234,10 @@ const GenericEditableTable = ({
 
             if (!grouped[groupKey]) {
                 grouped[groupKey] = {
-                    id: categoryId || 'no_category',
-                    category: categoryType || '',
+                    id: groupKey,
+                    category:
+                        categoryType ||
+                        (groupKey === 'no_category' ? 'No Category' : ''),
                     entries: [],
                 };
             }
@@ -276,7 +293,7 @@ const GenericEditableTable = ({
             .catch(() => toast.error('Failed to copy to clipboard'));
     };
 
-    // Update a field’s value (keyCounter corresponds to the row index in sorted data)
+    // Update an existing field’s value
     const handleFieldChange = (value, fieldId, keyCounter) => {
         setLocalData((prev) => {
             const updatedDetail = [...prev];
@@ -383,6 +400,7 @@ const GenericEditableTable = ({
         });
     };
 
+    // Render existing row field (same as before)
     const renderScheduledTableField = (entry, column, keyCounter) => {
         if (!entry || !column) return null;
 
@@ -507,6 +525,222 @@ const GenericEditableTable = ({
         }
     };
 
+    // --- New row functions for inline creation ---
+
+    // Update new entry fields (for grouped or ungrouped)
+    const handleNewFieldChange = (value, fieldId, groupId = null) => {
+        if (hasCategory) {
+            setNewEntries((prev) => ({
+                ...prev,
+                [groupId]: {
+                    ...prev[groupId],
+                    [fieldId]: value,
+                },
+            }));
+        } else {
+            setNewEntry((prev) => ({
+                ...prev,
+                [fieldId]: value,
+            }));
+        }
+    };
+
+    // Add the new row to localData and update the backend
+    const handleAddNewEntry = (groupId = null) => {
+        const newRowData = hasCategory ? newEntries[groupId] || {} : newEntry;
+        if (!newRowData || Object.keys(newRowData).length === 0) {
+            toast.error('Please fill in some data before adding.');
+            return;
+        }
+        // Determine a new sort_order
+        const maxSortOrder = localData.reduce(
+            (max, row) => Math.max(max, row.sort_order || 0),
+            0
+        );
+        const newRow = {
+            ...newRowData,
+            id: `new-${Date.now()}`, // temporary ID; adjust as needed
+            sort_order: maxSortOrder + 1,
+        };
+
+        // For grouped data, prepopulate the category field if needed
+        if (hasCategory && groupId !== 'no_category') {
+            newRow[rows.categoryKey.id] = {
+                id: groupId,
+                [rows.categoryKey.label]: groupId,
+            };
+        }
+
+        setLocalData((prev) => {
+            const updated = [...prev, newRow];
+            debouncedUpdate({ [rows.key]: updated });
+            return updated;
+        });
+        // Reset the new entry state for the corresponding group or overall
+        if (hasCategory) {
+            setNewEntries((prev) => ({ ...prev, [groupId]: {} }));
+        } else {
+            setNewEntry({});
+        }
+        toast.success('Row added');
+    };
+
+    // Render a new row field (similar to renderScheduledTableField)
+    const renderNewRowField = (newRowData, column, groupId = null) => {
+        const value = newRowData ? newRowData[column.id] : '';
+        switch (column.type) {
+            case 'colour':
+                return (
+                    <ColourPicker
+                        value={value}
+                        columnId={column.id}
+                        keyCounter={0}
+                        onChange={(val) =>
+                            handleNewFieldChange(val, column.id, groupId)
+                        }
+                    />
+                );
+            case 'currency':
+            case 'number':
+                return (
+                    <input
+                        type="text"
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
+            case 'date':
+                return (
+                    <input
+                        type="date"
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
+            case 'dropdown':
+                return (
+                    <select
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                    >
+                        {column.options.map((option) => (
+                            <option key={option.id} value={option.id}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                );
+            case 'dropdown-ajax': {
+                const options = preloadedOptions[column.id] || [];
+                return (
+                    <select
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                    >
+                        <option>Select an Option</option>
+                        {options.map((option) => (
+                            <option key={option.id} value={option.id}>
+                                {option.label}
+                            </option>
+                        ))}
+                    </select>
+                );
+            }
+            case 'multi-dropdown-ajax': {
+                const multiOptions = preloadedOptions[column.id] || [];
+                return (
+                    <MultiSelect
+                        settings={{ id: column.id, compact: true }}
+                        className={styles.selectFullWidth}
+                        multi={false}
+                        onChange={(value) =>
+                            handleNewFieldChange(value, column.id, groupId)
+                        }
+                        inputValue={value || ''}
+                        options={multiOptions}
+                    />
+                );
+            }
+            case 'total': {
+                const subtotal = calculateTotal(newRowData || {}, column.keys);
+                return new Intl.NumberFormat('en-AU', {
+                    style: 'currency',
+                    currency: 'AUD',
+                }).format(subtotal);
+            }
+            default:
+                return (
+                    <input
+                        type="text"
+                        value={value || ''}
+                        onChange={(e) =>
+                            handleNewFieldChange(
+                                e.target.value,
+                                column.id,
+                                groupId
+                            )
+                        }
+                    />
+                );
+        }
+    };
+
+    // Render the new row form (for grouped or ungrouped data)
+    const renderNewRowForm = (groupId = null) => {
+        const newRowData = hasCategory ? newEntries[groupId] || {} : newEntry;
+        return (
+            <tr className={styles.newRow}>
+                {columns.map((column) => (
+                    <td
+                        key={column.id}
+                        style={{
+                            textAlign:
+                                column.type === 'currency' ? 'right' : 'left',
+                        }}
+                    >
+                        {renderNewRowField(newRowData, column, groupId)}
+                    </td>
+                ))}
+                <td>
+                    <div className={styles.tdactions}>
+                        <button
+                            className={styles.btn_compact}
+                            onClick={() => handleAddNewEntry(groupId)}
+                        >
+                            Add
+                        </button>
+                    </div>
+                </td>
+            </tr>
+        );
+    };
+
     // Render header cell with a label and copy icon
     const renderHeaderCell = (column, group = null) => (
         <th
@@ -539,7 +773,7 @@ const GenericEditableTable = ({
     return (
         <div className={styles.gridtxt}>
             <div className={styles.gridtxt__header}>
-                <span>{schedulingConfig.title || 'Estimation Schedule'}</span>
+                <span>{title || 'Estimation Schedule'}</span>
             </div>
             {hasCategory ? (
                 groupedCategories.length > 0 ? (
@@ -635,6 +869,8 @@ const GenericEditableTable = ({
                                             </td>
                                         </tr>
                                     ))}
+                                    {/* Render the inline new row for this category */}
+                                    {renderNewRowForm(group.id)}
                                     {/* Render subtotal row for group only if a total column exists */}
                                     {totalColumnIndex !== -1 && (
                                         <tr className={styles.subtotalRow}>
@@ -764,6 +1000,8 @@ const GenericEditableTable = ({
                                 </td>
                             </tr>
                         ))}
+                        {/* Render the inline new row at the bottom */}
+                        {renderNewRowForm()}
                         {/* Render overall subtotal row only if a total column exists */}
                         {totalColumnIndex !== -1 && (
                             <tr className={styles.subtotalRow}>
@@ -812,17 +1050,6 @@ const GenericEditableTable = ({
                     reloading the data.
                 </div>
             )}
-
-            <div className={styles.polActions}>
-                <button
-                    className={styles.btn}
-                    onClick={() => {
-                        modalOpen('create', 0);
-                    }}
-                >
-                    Add
-                </button>
-            </div>
         </div>
     );
 };

package/src/components/crm/generic/styles/GenericEditableTable.module.scss

@@ -144,12 +144,35 @@
     outline: none;
     transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
     font-size: 1.25em;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+    }
 }
 
-.btn:hover {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-rgb), 1.05);
+.btn_compact {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.4rem 0.75rem; /* Reduced padding for a compact look */
+    cursor: pointer;
+    font-size: 1rem; /* Slightly smaller font size */
+    color: var(--tertiary-color);
+    text-decoration: none;
+    overflow: hidden;
+    background: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border-radius: var(--br);
+    outline: none;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
+
+    &:hover {
+        color: var(--primary-color);
+        background: var(--highlight-color);
+        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+    }
 }
 
 .tdactions {
@@ -223,40 +246,79 @@
 }
 
 .cpicker {
-    width: 100%;
+    position: relative;
     display: flex;
-    flex-wrap: nowrap;
     align-items: center;
 
     &__btn {
-        flex: 1;
-
         button {
-            width: 32px;
-            height: 32px;
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: #fff;
-            background-color: #b0b0b0;
-            border: 2px solid #999;
-            border-radius: 8px;
+            width: 28px;
+            height: 28px;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: background 0.2s;
 
             &:hover {
-                background-color: #999;
-                border-color: #666;
+                background-color: #e0e0e0;
             }
 
             &:focus {
                 outline: none;
-                box-shadow: 0 0 0 2px rgba(72, 168, 58, 0.5);
+                box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
             }
+        }
+    }
+}
 
-            &:active {
-                background-color: #888;
-                transform: scale(0.98);
-            }
+.colour_popover {
+    position: absolute;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 10px;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 1000;
+
+    .clearContainer {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-top: 8px;
+    }
+
+    .clearButton {
+        width: 100%; /* Make button span the entire width */
+        background: rgba(
+            var(--primary-rgb),
+            0.1
+        ); /* Soft transparent background */
+        color: var(--primary-color);
+        border: none;
+        border-top: 1px solid rgba(var(--primary-rgb), 0.2); /* Subtle separator */
+        border-radius: 0 0 8px 8px; /* Match colour picker's bottom corners */
+        font-size: 13px;
+        padding: 8px;
+        cursor: pointer;
+        transition: background 0.2s, border 0.2s, box-shadow 0.2s;
+        font-weight: 500;
+        text-align: center;
+        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.05);
+
+        &:hover {
+            background: rgba(var(--primary-rgb), 0.15);
+        }
+
+        &:active {
+            background: rgba(var(--primary-rgb), 0.25);
+            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
         }
     }
 }
@@ -287,3 +349,12 @@
 .react-select__indicators {
     padding: 0 0.25rem;
 }
+
+.newRow {
+    background-color: rgba(
+        var(--primary-rgb),
+        0.15
+    ); /* Slightly lighter background */
+    border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
+    border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3);
+}