@visns-studio/visns-components 5.7.11 → 5.7.13

package/package.json

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

package/src/components/crm/MultiSelect.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import CustomFetch from './Fetch';
 import SelectList from './SelectList';
-import Select, { createFilter } from 'react-select';
+import Select, { createFilter, components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import styles from './styles/MultiSelect.module.scss';
 
@@ -17,6 +17,36 @@ const isTouchDevice = () => {
     );
 };
 
+// Custom Option component to display description
+const CustomOption = (props) => {
+    const { children, data, ...rest } = props;
+    return (
+        <components.Option {...rest}>
+            <div className={styles.option}>
+                <div className={styles.optionLabel}>{children}</div>
+                {data.description && (
+                    <div className={styles.optionDescription}>{data.description}</div>
+                )}
+            </div>
+        </components.Option>
+    );
+};
+
+// Custom MultiValue component to display description for selected values
+const CustomMultiValue = (props) => {
+    const { children, data, ...rest } = props;
+    return (
+        <components.MultiValue {...rest}>
+            <div className={styles.multiValue}>
+                <div className={styles.multiValueLabel}>{children}</div>
+                {data.description && (
+                    <div className={styles.multiValueDescription}>{data.description}</div>
+                )}
+            </div>
+        </components.MultiValue>
+    );
+};
+
 function MultiSelect({
     className,
     inputValue = [], // Default to an empty array
@@ -55,6 +85,8 @@ function MultiSelect({
                                   a.name ||
                                   a.description ||
                                   'Unknown',
+                              // Make sure description is preserved
+                              description: a.description || null,
                               ...a,
                           };
                       }
@@ -74,12 +106,36 @@ function MultiSelect({
             JSON.stringify(prevInputValueRef.current) !==
             JSON.stringify(inputValue)
         ) {
+            // Find matching options to get descriptions if not present in inputValue
+            const findMatchingOption = (item) => {
+                if (item.description) return item;
+
+                // Try to find a matching option with description
+                const matchingOption = selectOptions.find(opt =>
+                    opt.id === item.id || opt.value === item.id
+                );
+
+                if (matchingOption && matchingOption.description) {
+                    return {
+                        ...item,
+                        description: matchingOption.description
+                    };
+                }
+
+                return item;
+            };
+
             const _values = Array.isArray(inputValue)
-                ? inputValue.map((a) => ({
-                      value: a.id,
-                      label: a.label || a.name || a.description || 'Unknown',
-                      ...a,
-                  }))
+                ? inputValue.map((a) => {
+                      const enrichedItem = findMatchingOption(a);
+                      return {
+                          value: enrichedItem.id,
+                          label: enrichedItem.label || enrichedItem.name || enrichedItem.description || 'Unknown',
+                          // Make sure description is preserved
+                          description: enrichedItem.description || null,
+                          ...enrichedItem,
+                      };
+                  })
                 : inputValue && typeof inputValue === 'object'
                 ? [
                       {
@@ -89,14 +145,17 @@ function MultiSelect({
                               inputValue.name ||
                               inputValue.description ||
                               'Unknown',
+                          // Make sure description is preserved
+                          description: inputValue.description || null,
                           ...inputValue,
                       },
                   ]
                 : [];
+
             setSelectValue(_values);
             prevInputValueRef.current = inputValue;
         }
-    }, [inputValue]);
+    }, [inputValue, selectOptions]);
 
     const handleCreate = async (inputValue) => {
         if (creatableConfig.url && creatableConfig.method) {
@@ -110,6 +169,8 @@ function MultiSelect({
                 const newOption = {
                     value: res.data.id,
                     label: res.data.label || inputValue,
+                    // Make sure description is preserved if it exists in the response
+                    description: res.data.description || null,
                     ...res.data,
                 };
 
@@ -146,7 +207,11 @@ function MultiSelect({
             isSearchable={isSearchable}
             isMulti={multi}
             filterOption={createFilter({ ignoreAccents: false })}
-            components={{ SelectList }}
+            components={{
+                SelectList,
+                Option: CustomOption,
+                MultiValue: CustomMultiValue
+            }}
             options={selectOptions}
             menuPortalTarget={document.body}
             menuPlacement={menuPlacement}
@@ -179,7 +244,7 @@ function MultiSelect({
                 }),
                 option: (base) => ({
                     ...base,
-                    padding: isTouchDevice() ? '12px 15px' : base.padding, // Larger padding for touch devices
+                    padding: isTouchDevice() ? '12px 15px' : '8px 12px', // Larger padding for touch devices
                 }),
                 menuPortal: (base) => ({
                     ...base,
@@ -233,6 +298,24 @@ function MultiSelect({
                 multiValue: (base) => ({
                     ...base,
                     margin: '2px',
+                    padding: '2px 4px',
+                    minHeight: '30px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                }),
+                multiValueLabel: (base) => ({
+                    ...base,
+                    padding: '0',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                }),
+                multiValueRemove: (base) => ({
+                    ...base,
+                    padding: '0 4px',
+                    alignSelf: 'flex-start',
+                    marginTop: '2px',
                 }),
             }}
             value={selectValue}

package/src/components/crm/SelectList.jsx

@@ -4,13 +4,15 @@ import { FixedSizeList } from 'react-window';
 function SelectList(props) {
     const { options, children, maxHeight, getValue } = props;
     const [value] = getValue();
-    const initialOffset = options.indexOf(value) * 50;
+    // Increase item size to accommodate description
+    const itemSize = 60; // Increased from 50 to allow space for description
+    const initialOffset = options.indexOf(value) * itemSize;
 
     return (
         <FixedSizeList
             height={maxHeight}
             itemCount={children.length}
-            itemSize={height}
+            itemSize={itemSize}
             initialScrollOffset={initialOffset}
         >
             {({ index, style }) => <div style={style}>{children[index]}</div>}

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

@@ -7,11 +7,14 @@ import moment from 'moment';
 import get from 'lodash/get';
 import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
+import { arrayMoveImmutable } from 'array-move';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../../crm/Fetch';
 import ActionButtons from './ActionButtons';
 import Form from '../../crm/Form';
 import { formatCurrency } from './utils/formatters';
+import SortableTableBody from './SortableQuoteItems';
 
 import styles from './styles/GenericQuote.module.scss';
 
@@ -31,17 +34,309 @@ function GenericQuote({ logo, setting, urlParam }) {
     const [formData, setFormData] = useState({});
 
     // Modal functions
-    const modalOpen = (type, id) => {
-        setModalShow(true);
+    const modalOpen = (type, id, customFormSettings = null, itemData = null) => {
+        // Debug logging to help troubleshoot form settings issues
+        console.log('Opening modal with form settings:', {
+            type,
+            id,
+            hasCustomSettings: !!customFormSettings,
+            customFormSettings,
+            defaultForm: form,
+            itemData
+        });
+
+        // Use custom form settings if provided, otherwise use the default form
+        let formSettings = customFormSettings || form;
+
+        // Ensure the form settings have the correct structure
+        // The Form component expects a formSettings object with a 'create' or 'update' property
+        // depending on the formType, and a 'fields' array
+        if (formSettings && !formSettings[type] && type === 'create') {
+            // If the form settings don't have a 'create' property but we're opening a create form,
+            // add a default 'create' property
+            formSettings = {
+                ...formSettings,
+                create: {
+                    title: customFormSettings?.create?.title || 'Create New',
+                    submitUrl: customFormSettings?.create?.submitUrl || '/api/submit',
+                    method: customFormSettings?.create?.method || 'POST'
+                }
+            };
+        }
+
+        // If we have item data, add it to the form settings
+        if (itemData && type === 'update') {
+            formSettings = {
+                ...formSettings,
+                initialData: itemData
+            };
+        }
+
+        console.log('Final form settings:', formSettings);
+
+        // Set the state variables to open the modal
+        setFormData(formSettings);
         setFormType(type);
         setFormId(id);
-        setFormData(form);
+        setModalShow(true);
     };
 
     const modalClose = () => {
         setModalShow(false);
     };
 
+    // Item sorting, editing, and deleting functions
+    const handleSortEnd = (tableId, oldIndex, newIndex) => {
+        if (oldIndex === newIndex) return;
+
+        // Create a copy of the data
+        const newData = { ...data };
+
+        // Reorder the items in the specified table
+        newData[tableId] = arrayMoveImmutable(newData[tableId], oldIndex, newIndex);
+
+        // Update the state immediately for better UX
+        setData(newData);
+
+        // Find the table configuration
+        const tableConfig = setting.tables.find(t => t.id === tableId);
+        if (!tableConfig || !tableConfig.urls || !tableConfig.urls.sort) {
+            console.error('Sort URL not found for table:', tableId);
+            toast.error('Failed to update item order: Missing configuration');
+            return;
+        }
+
+        // Get the sort URL and key from the table configuration
+        const { url, key } = tableConfig.urls.sort;
+
+        // Get CSRF token
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+        // Show a loading toast
+        const toastId = toast.loading('Updating item order...');
+
+        // Create an array of promises for each item update
+        const updatePromises = newData[tableId].map((item, index) => {
+            // For each item, create a request that only sends the sort_order
+            const itemId = item[tableConfig.dataId];
+            const sortOrder = index + 1; // 1-based index for sort order
+
+            // Create a request body with just the sort_order key
+            const requestBody = {
+                [key]: sortOrder
+            };
+
+            // Send individual request for this item
+            return fetch(`${url}/${itemId}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': csrfToken,
+                },
+                body: JSON.stringify(requestBody)
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Failed to update item ${itemId}`);
+                }
+                return response.json();
+            });
+        });
+
+        // Wait for all requests to complete
+        Promise.all(updatePromises)
+            .then(results => {
+                console.log('All items updated successfully:', results);
+
+                // Update toast
+                toast.update(toastId, {
+                    render: 'Item order updated successfully',
+                    type: 'success',
+                    isLoading: false,
+                    autoClose: 3000,
+                    closeButton: true,
+                });
+            })
+            .catch(error => {
+                console.error('Error updating order:', error);
+
+                // Update toast
+                toast.update(toastId, {
+                    render: `Failed to update item order: ${error.message}`,
+                    type: 'error',
+                    isLoading: false,
+                    autoClose: 5000,
+                    closeButton: true,
+                });
+
+                // Revert to the original order in case of error
+                setData(data);
+            });
+    };
+
+    const handleEditItem = (tableId, row, index) => {
+        console.log('Edit item:', { tableId, row, index });
+
+        // Find the table configuration
+        const tableConfig = setting.tables.find(t => t.id === tableId);
+        if (!tableConfig) {
+            console.error('Table configuration not found for:', tableId);
+            toast.error('Failed to edit item: Missing configuration');
+            return;
+        }
+
+        // Find the form settings for the table
+        const tableForm = tableConfig.form || form;
+
+        // Get the item ID
+        const itemId = row[tableConfig.dataId];
+
+        // If there's a get URL for fetching item details
+        if (tableConfig.urls && tableConfig.urls.get) {
+            // Get CSRF token
+            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+            // Fetch the item details before opening the modal
+            // Laravel uses GET for retrieving data
+            fetch(`${tableConfig.urls.get}${tableConfig.dataId}/${itemId}`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest',
+                    'X-CSRF-TOKEN': csrfToken,
+                }
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to fetch item details');
+                }
+                return response.json();
+            })
+            .then(itemData => {
+                console.log('Fetched item data:', itemData);
+                // Open the modal with the update form type and the fetched data
+                // Use the update URL from the table configuration for the form
+                const updatedFormSettings = {
+                    ...tableForm,
+                    update: {
+                        ...tableForm.update,
+                        submitUrl: tableConfig.urls.update + tableConfig.dataId + '/' + itemId,
+                        method: 'PUT' // Laravel uses PUT for updates
+                    }
+                };
+                modalOpen('update', itemId, updatedFormSettings, itemData);
+            })
+            .catch(error => {
+                console.error('Error fetching item details:', error);
+                toast.error('Failed to fetch item details: ' + error.message);
+
+                // Fall back to opening the modal with the row data
+                modalOpen('update', itemId, tableForm, row);
+            });
+        } else {
+            // Open the modal with the update form type
+            modalOpen('update', itemId, tableForm, row);
+        }
+    };
+
+    const handleDeleteItem = (tableId, row, index) => {
+        console.log('Delete item:', { tableId, row, index });
+
+        // Find the table configuration
+        const tableConfig = setting.tables.find(t => t.id === tableId);
+        if (!tableConfig || !tableConfig.urls || !tableConfig.urls.delete) {
+            console.error('Delete URL not found for table:', tableId);
+            toast.error('Failed to delete item: Missing configuration');
+            return;
+        }
+
+        // Get the item ID
+        const itemId = row[tableConfig.dataId];
+
+        // Show a confirmation dialog
+        confirmDialog({
+            title: 'Delete Item',
+            message: 'Are you sure you want to delete this item?',
+            confirmLabel: 'Delete',
+            cancelLabel: 'Cancel',
+            onConfirm: () => {
+                // Get CSRF token
+                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+
+                // Laravel requires a special approach for DELETE requests
+                // We need to include the _method parameter in the request body
+                const formData = new FormData();
+                formData.append('_method', 'DELETE');
+
+                // Send the delete request to the server
+                fetch(`${tableConfig.urls.delete}${tableConfig.dataId}/${itemId}`, {
+                    method: 'POST', // Actually sending as POST but Laravel will interpret as DELETE
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'X-CSRF-TOKEN': csrfToken,
+                    },
+                    body: formData
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Failed to delete item');
+                    }
+                    return response.json();
+                })
+                .then(responseData => {
+                    console.log('Item deleted successfully:', responseData);
+
+                    // Create a copy of the data
+                    const newData = { ...data };
+
+                    // Remove the item from the specified table
+                    newData[tableId] = newData[tableId].filter(item => item[tableConfig.dataId] !== itemId);
+
+                    // Update the state
+                    setData(newData);
+
+                    // Show a success toast
+                    toast.success('Item deleted successfully');
+                })
+                .catch(error => {
+                    console.error('Error deleting item:', error);
+                    toast.error('Failed to delete item: ' + error.message);
+                });
+            }
+        });
+    };
+
+    const handleAddItem = (tableId) => {
+        console.log('Add item to table:', tableId);
+
+        // Find the table configuration
+        const tableConfig = setting.tables.find(t => t.id === tableId);
+        if (!tableConfig) {
+            console.error('Table configuration not found for:', tableId);
+            toast.error('Failed to add item: Missing configuration');
+            return;
+        }
+
+        // Find the form settings for the table
+        const tableForm = tableConfig.form || form;
+
+        // Update the form settings to include the dataId in the submitUrl
+        const updatedFormSettings = {
+            ...tableForm,
+            create: {
+                ...tableForm.create,
+                submitUrl: tableForm.create?.submitUrl
+                    ? `${tableForm.create.submitUrl}${tableConfig.dataId}`
+                    : `/ajax/quoteItems/${tableConfig.dataId}`,
+                method: 'POST' // Laravel uses POST for creating new items
+            }
+        };
+
+        // Open the modal with the create form type and updated form settings
+        modalOpen('create', 0, updatedFormSettings);
+    };
+
     useEffect(() => {
         if (actionItems && actionItems.length > 0) {
             setActions(actionItems);
@@ -108,6 +403,15 @@ function GenericQuote({ logo, setting, urlParam }) {
             return;
         }
 
+        // Handle modal or addModal type - opens a form modal
+        if (action.type === 'modal' || action.type === 'addModal') {
+            console.log('Opening modal form with action:', action);
+            // Open the modal with 'create' type to indicate a new submission
+            // Use the form settings from the action if provided
+            modalOpen('create', 0, action.setting); // Using 0 as the ID since it's a new form
+            return;
+        }
+
         // Handle generatePdf type - generates PDF from a view
         if (action.type === 'generatePdf' && action.view) {
             console.log('Generating PDF from view:', action.view);
@@ -200,6 +504,7 @@ function GenericQuote({ logo, setting, urlParam }) {
                     modalOpen('update', data.id);
                 }
                 break;
+            // Note: 'addModal' is now handled as a type, not an id
             case 'saveAsPdf':
                 // If no type is specified but id is saveAsPdf, default to PDF generation
                 if (!action.type) {
@@ -532,15 +837,24 @@ function GenericQuote({ logo, setting, urlParam }) {
                                     key={`table-section-${table.id}`}
                                     className={styles.quoteTableSection}
                                 >
-                                    <h2 className={styles.tableTitle}>
-                                        {table.label}
-                                    </h2>
+                                    <div className={styles.tableTitleRow}>
+                                        <h2 className={styles.tableTitle}>
+                                            {table.label}
+                                        </h2>
+                                        <button
+                                            className={styles.addItemButton}
+                                            onClick={() => handleAddItem(table.id)}
+                                        >
+                                            + Add Item
+                                        </button>
+                                    </div>
                                     <table
                                         key={`table-${table.id}`}
                                         className={styles.quoteTable}
                                     >
                                         <thead>
                                             <tr>
+                                                <th className={styles.dragHandleHeader}></th>
                                                 {table.columns.map((column) => (
                                                     <th
                                                         key={`${table.id}-column-${column.id}`}
@@ -557,73 +871,22 @@ function GenericQuote({ logo, setting, urlParam }) {
                                                             : column.label}
                                                     </th>
                                                 ))}
+                                                <th className={styles.actionHeader}>Actions</th>
                                             </tr>
                                         </thead>
-                                        <tbody>
-                                            {data[table.id].map(
-                                                (row, index) => (
-                                                    <tr
-                                                        key={`row-${index}`}
-                                                        className={
-                                                            styles.tableRow
-                                                        }
-                                                    >
-                                                        {table.columns.map(
-                                                            (column) => {
-                                                                const cellValue =
-                                                                    get(
-                                                                        row,
-                                                                        column.id,
-                                                                        ''
-                                                                    );
-
-                                                                return (
-                                                                    <td
-                                                                        key={`row-${index}-column-${column.id}`}
-                                                                        style={
-                                                                            column.style ||
-                                                                            {}
-                                                                        }
-                                                                        className={
-                                                                            styles.tableCell
-                                                                        }
-                                                                    >
-                                                                        {column.id ===
-                                                                            'subtotal' ||
-                                                                        column.label ===
-                                                                            'Subtotal'
-                                                                            ? formatCurrency(
-                                                                                  parseFloat(
-                                                                                      get(
-                                                                                          row,
-                                                                                          'rate',
-                                                                                          0
-                                                                                      )
-                                                                                  ) *
-                                                                                      parseFloat(
-                                                                                          get(
-                                                                                              row,
-                                                                                              'qty',
-                                                                                              1
-                                                                                          )
-                                                                                      )
-                                                                              )
-                                                                            : column.type ===
-                                                                              'currency'
-                                                                            ? formatCurrency(
-                                                                                  cellValue
-                                                                              )
-                                                                            : cellValue}
-                                                                    </td>
-                                                                );
-                                                            }
-                                                        )}
-                                                    </tr>
-                                                )
-                                            )}
-
-                                            {/* Total row */}
+                                        <SortableTableBody
+                                            items={data[table.id]}
+                                            columns={table.columns}
+                                            onSortEnd={({oldIndex, newIndex}) => handleSortEnd(table.id, oldIndex, newIndex)}
+                                            onEdit={(row, index) => handleEditItem(table.id, row, index)}
+                                            onDelete={(row, index) => handleDeleteItem(table.id, row, index)}
+                                            useDragHandle
+                                            helperClass="sortableHelper"
+                                            distance={5}
+                                        />
+                                        <tfoot>
                                             <tr className={styles.subtotalRow}>
+                                                <td></td> {/* Empty cell for drag handle */}
                                                 <td
                                                     colSpan={
                                                         table.columns.length - 1
@@ -641,8 +904,9 @@ function GenericQuote({ logo, setting, urlParam }) {
                                                 >
                                                     {formatCurrency(subtotal)}
                                                 </td>
+                                                <td></td> {/* Empty cell for action buttons */}
                                             </tr>
-                                        </tbody>
+                                        </tfoot>
                                     </table>
                                 </div>
                             );

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { SortableContainer, SortableElement, sortableHandle } from 'react-sortable-hoc';
+import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+import get from 'lodash/get';
+import { formatCurrency } from './utils/formatters';
+
+import styles from './styles/SortableQuoteItems.module.scss';
+
+// Drag handle component
+const DragHandle = sortableHandle(() => (
+    <ChevronVertical className={styles.dragHandle} strokeWidth={1} size={22} />
+));
+
+// Sortable table row component
+const SortableRow = SortableElement(({ row, index, columns, onEdit, onDelete }) => {
+    return (
+        <tr className={styles.sortableRow}>
+            <td className={styles.dragHandleCell}>
+                <DragHandle />
+            </td>
+            {columns.map((column) => {
+                const cellValue = get(row, column.id, '');
+                
+                return (
+                    <td
+                        key={`row-${index}-column-${column.id}`}
+                        style={column.style || {}}
+                        className={styles.tableCell}
+                    >
+                        {column.id === 'subtotal' || column.label === 'Subtotal'
+                            ? formatCurrency(
+                                parseFloat(get(row, 'rate', 0)) *
+                                parseFloat(get(row, 'qty', 1))
+                            )
+                            : column.type === 'currency'
+                            ? formatCurrency(cellValue)
+                            : cellValue}
+                    </td>
+                );
+            })}
+            <td className={styles.actionCell}>
+                <div className={styles.actionButtons}>
+                    <Pencil
+                        className={styles.editButton}
+                        strokeWidth={2}
+                        size={20}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onEdit(row, index);
+                        }}
+                    />
+                    <TrashCan
+                        className={styles.deleteButton}
+                        strokeWidth={2}
+                        size={20}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onDelete(row, index);
+                        }}
+                    />
+                </div>
+            </td>
+        </tr>
+    );
+});
+
+// Sortable table body component
+const SortableTableBody = SortableContainer(({ items, columns, onEdit, onDelete }) => {
+    return (
+        <tbody>
+            {items.map((row, index) => (
+                <SortableRow
+                    key={`row-${index}`}
+                    index={index}
+                    row={row}
+                    columns={columns}
+                    onEdit={onEdit}
+                    onDelete={onDelete}
+                />
+            ))}
+        </tbody>
+    );
+});
+
+export default SortableTableBody;

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

@@ -549,15 +549,42 @@
     margin-bottom: 25px;
 }
 
+.tableTitleRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--primary-color, #1a3d66);
+    padding: 0 15px 0 0;
+}
+
 .tableTitle {
     font-size: 1rem;
     font-weight: 600;
     color: var(--tertiary-color, white);
     margin: 0;
     padding: 10px 15px;
-    background-color: var(--primary-color, #1a3d66);
+    background-color: transparent;
     border-radius: 0;
     border: none;
+    flex: 1;
+}
+
+.addItemButton {
+    background-color: var(--tertiary-color, white);
+    color: var(--primary-color, #1a3d66);
+    border: none;
+    border-radius: 4px;
+    padding: 6px 12px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        background-color: #f0f0f0;
+    }
 }
 
 .quoteTable {
@@ -599,6 +626,25 @@
     }
 }
 
+.dragHandleHeader {
+    width: 30px;
+    background-color: #4fbfa5;
+    color: white;
+    padding: 10px 5px !important;
+    border-bottom: none;
+}
+
+.actionHeader {
+    width: 80px;
+    background-color: #4fbfa5;
+    color: white;
+    text-align: center;
+    font-weight: 600;
+    font-size: 0.85rem;
+    padding: 10px 15px;
+    border-bottom: none;
+}
+
 .tableRow {
     border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
     transition: background-color 0.2s ease;
@@ -752,11 +798,20 @@
         font-size: 0.85rem;
     }
 
+    .tableTitleRow {
+        padding: 0 10px 0 0;
+    }
+
     .tableTitle {
         font-size: 0.9rem;
         padding: 8px 12px;
     }
 
+    .addItemButton {
+        padding: 4px 8px;
+        font-size: 0.75rem;
+    }
+
     .quoteTable {
         font-size: 0.8rem;
     }

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

@@ -0,0 +1,101 @@
+.sortableRow {
+    position: relative;
+    transition: background-color 0.2s ease;
+    cursor: grab;
+    border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
+    background-color: white;
+
+    &:hover {
+        background-color: rgba(var(--primary-rgb), 0.02);
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &:nth-child(odd) {
+        background-color: #f9f9f9;
+    }
+}
+
+.dragHandleCell {
+    width: 30px;
+    padding: 8px 4px !important;
+    vertical-align: middle;
+}
+
+.dragHandle {
+    color: #4fbfa5;
+    cursor: grab;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.tableCell {
+    padding: 12px 15px;
+    color: var(--paragraph-color);
+    font-size: 0.85rem;
+    line-height: 1.4;
+    vertical-align: middle;
+}
+
+.actionCell {
+    width: 80px;
+    padding: 12px 15px !important;
+    vertical-align: middle;
+    text-align: right;
+}
+
+.actionButtons {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.editButton, .deleteButton {
+    cursor: pointer;
+    transition: color 0.2s ease;
+
+    &:hover {
+        transform: scale(1.1);
+    }
+}
+
+.editButton {
+    color: #4fbfa5;
+
+    &:hover {
+        color: var(--secondary-color);
+    }
+}
+
+.deleteButton {
+    color: #4fbfa5;
+
+    &:hover {
+        color: #d32f2f;
+    }
+}
+
+/* Helper class for the dragged item */
+:global(.sortableHelper) {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    background-color: white;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    opacity: 0.9;
+    z-index: 1000;
+
+    td {
+        background-color: white;
+        border-top: 1px solid rgba(var(--primary-rgb), 0.1);
+        border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+    }
+}

package/src/components/crm/styles/MultiSelect.module.scss

@@ -11,6 +11,47 @@
     box-shadow: none !important;
 }
 
+.option {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.optionLabel {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.optionDescription {
+    font-size: 12px;
+    color: #6b7280;
+    font-weight: 400;
+    line-height: 1.2;
+    margin-top: 2px;
+}
+
+.multiValue {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.multiValueLabel {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.multiValueDescription {
+    font-size: 11px;
+    color: rgba(0, 0, 0, 0.7); /* Darker color for better contrast */
+    font-weight: 400;
+    line-height: 1.1;
+    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
+    padding: 1px 3px;
+    border-radius: 2px;
+    margin-top: 1px;
+}
+
 /* Global styles for react-select to ensure it works in modals */
 :global {
     .visns-select__menu-portal {
@@ -65,6 +106,24 @@
     /* Multi-value styles */
     .visns-select__multi-value {
         margin: 2px !important;
+        padding: 2px 4px !important;
+        min-height: 30px !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+    }
+
+    .visns-select__multi-value__label {
+        padding: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        width: 100% !important;
+    }
+
+    .visns-select__multi-value__remove {
+        padding: 0 4px !important;
+        align-self: flex-start !important;
+        margin-top: 2px !important;
     }
 
     /* Fix for modals */
@@ -84,6 +143,11 @@
         overflow: visible !important;
     }
 
+    /* Option styling for description */
+    .visns-select__option {
+        padding: 8px 12px !important;
+    }
+
     .css-1fdsijx-ValueContainer {
         padding: 2px 8px !important;
         flex-wrap: wrap !important;

package/src/utils/ConfirmDialog.js

@@ -0,0 +1,67 @@
+import { toast } from 'react-toastify';
+
+/**
+ * A simple confirmation dialog using toast notifications
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - Dialog title
+ * @param {string} options.message - Dialog message
+ * @param {string} options.confirmLabel - Label for the confirm button
+ * @param {string} options.cancelLabel - Label for the cancel button
+ * @param {Function} options.onConfirm - Function to call when confirmed
+ * @param {Function} options.onCancel - Function to call when cancelled
+ */
+export const confirmDialog = ({
+    title = 'Confirm',
+    message = 'Are you sure?',
+    confirmLabel = 'Yes',
+    cancelLabel = 'No',
+    onConfirm = () => {},
+    onCancel = () => {}
+}) => {
+    // Create a custom toast with buttons
+    toast.info(
+        <div>
+            <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>{title}</div>
+            <div style={{ marginBottom: '16px' }}>{message}</div>
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+                <button
+                    onClick={() => {
+                        toast.dismiss();
+                        onCancel();
+                    }}
+                    style={{
+                        padding: '6px 12px',
+                        background: '#f5f5f5',
+                        border: '1px solid #ddd',
+                        borderRadius: '4px',
+                        cursor: 'pointer'
+                    }}
+                >
+                    {cancelLabel}
+                </button>
+                <button
+                    onClick={() => {
+                        toast.dismiss();
+                        onConfirm();
+                    }}
+                    style={{
+                        padding: '6px 12px',
+                        background: '#d32f2f',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer'
+                    }}
+                >
+                    {confirmLabel}
+                </button>
+            </div>
+        </div>,
+        {
+            autoClose: false,
+            closeButton: false,
+            closeOnClick: false,
+            draggable: false
+        }
+    );
+};