@visns-studio/visns-components 5.3.3 → 5.3.6

package/package.json

@@ -14,7 +14,7 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.8.1",
+        "axios": "^1.8.3",
         "dayjs": "^1.11.13",
         "fabric": "^6.5.4",
         "file-saver": "^2.0.5",
@@ -78,7 +78,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.3.3",
+    "version": "5.3.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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

@@ -112,10 +112,14 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 }
 
                 if (widget.api?.url && widget.api?.method) {
+                    const requestParams = {
+                        ...widgetFilters,
+                        ...(widget.api.params || {}),
+                    };
                     return CustomFetch(
                         widget.api.url,
                         widget.api.method,
-                        widgetFilters
+                        requestParams
                     );
                 }
                 return null;
@@ -515,9 +519,64 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         <ResponsivePie data={widgetData} {...widget.props} />
                     );
                 case 'bar': {
-                    if (widgetData.keys) {
-                        widget.props.keys = widgetData.keys;
+                    // Handle both data structures
+                    let barData = [];
+                    let colors = {};
+                    let keys = [];
+
+                    // Handle new data structure (from your first example)
+                    if (
+                        widgetData.data &&
+                        Array.isArray(widgetData.data) &&
+                        widgetData.colors
+                    ) {
+                        barData = widgetData.data;
+                        colors = widgetData.colors;
+                        // Extract keys from the first data item, excluding 'month' or any other index field
+                        keys = Object.keys(barData[0] || {}).filter(
+                            (key) => key !== 'month'
+                        );
                     }
+                    // Handle newer data structure (from your second example)
+                    else if (
+                        widgetData.data &&
+                        Array.isArray(widgetData.data) &&
+                        widgetData.keys
+                    ) {
+                        barData = widgetData.data;
+                        keys = widgetData.keys;
+                        // Extract colors from the first data item
+                        if (barData[0]) {
+                            keys.forEach((key) => {
+                                const colorKey = `${key}Color`;
+                                if (barData[0][colorKey]) {
+                                    colors[key] = barData[0][colorKey];
+                                }
+                            });
+                        }
+                    }
+                    // Handle legacy data structure
+                    else {
+                        barData =
+                            widgetData.bar?.data ||
+                            widgetData.data ||
+                            widgetData;
+                        if (widgetData.keys) {
+                            keys = widgetData.keys;
+                        }
+                    }
+
+                    // Set up colors if they exist
+                    if (Object.keys(colors).length > 0) {
+                        widget.props.colors = ({ id }) => colors[id];
+                    }
+
+                    // Set keys in props if they exist
+                    if (keys.length > 0) {
+                        widget.props.keys = keys;
+                    }
+
+                    // Handle legend setup
                     let legendMapping = {};
                     if (widget.legend) {
                         legendMapping = widget.legend.reduce((acc, curr) => {
@@ -544,14 +603,14 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         };
                         widget.props.tooltip = CustomTooltip;
                     }
-                    const barData =
-                        widgetData.bar?.data || widgetData.data || widgetData;
+
                     if (barData?.length > 0) {
                         return (
                             <div style={{ height: widget.height || '600px' }}>
                                 <ResponsiveBar
                                     key={`${widget.id}-${widget.size}`}
                                     data={barData}
+                                    indexBy="month"
                                     {...widget.props}
                                 />
                             </div>

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

@@ -12,24 +12,23 @@ import MultiSelect from '../MultiSelect';
 import 'react-confirm-alert/src/react-confirm-alert.css';
 import styles from './styles/GenericEditableTable.module.scss';
 
-// Updated ColourPicker with an expanded pastel palette and a refined Akar icon
+// Updated ColourPicker with an expanded pastel palette
 const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
     const [colorPickerShow, setColorPickerShow] = useState(false);
     const buttonRef = useRef(null);
     const popoverRef = useRef(null);
 
-    // Expanded custom palette of pastel colours
     const pastelColors = [
-        '#FFB3BA', // pastel red
-        '#FFDFBA', // pastel orange
-        '#FFFFBA', // pastel yellow
-        '#BAFFC9', // pastel green
-        '#BAE1FF', // pastel blue
-        '#BFFCC6', // additional pastel green
-        '#E2BAFF', // pastel purple
-        '#C3B1E1', // pastel lavender
-        '#F0E6EF', // pastel pink
-        '#D0E8F2', // pastel light blue
+        '#FFB3BA',
+        '#FFDFBA',
+        '#FFFFBA',
+        '#BAFFC9',
+        '#BAE1FF',
+        '#BFFCC6',
+        '#E2BAFF',
+        '#C3B1E1',
+        '#F0E6EF',
+        '#D0E8F2',
     ];
 
     useEffect(() => {
@@ -43,7 +42,6 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
                 setColorPickerShow(false);
             }
         };
-
         document.addEventListener('mousedown', handleClickOutside);
         return () =>
             document.removeEventListener('mousedown', handleClickOutside);
@@ -54,7 +52,6 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
         : {};
 
     const handleClear = () => {
-        // Passing an empty string to represent "no colour selected"
         onChange('', columnId, keyCounter);
         setColorPickerShow(false);
     };
@@ -102,7 +99,6 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
                                         setColorPickerShow(false);
                                     }}
                                 />
-                                {/* Extra clear button added below the CompactPicker */}
                                 <div className={styles.clearContainer}>
                                     <button
                                         onClick={handleClear}
@@ -122,27 +118,94 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
 
 const GenericEditableTable = ({
     schedulingConfig,
-    data,
+    data, // incoming data – may be a plain object or already an array of datasets
     dataId,
     preloadedOptions,
-    setData,
+    setData, // callback to update the parent state
 }) => {
+    const isInitialLoad = useRef(true);
     const { columns, rows, form, title } = schedulingConfig;
     const hasCategory = rows && rows.categoryKey; // Only group if defined
 
+    // dataSets: each item => { created_at: string, data: array of rows }
+    const [dataSets, setDataSets] = useState([]);
+    // Index of the currently active dataset
+    const [activeDatasetIndex, setActiveDatasetIndex] = useState(0);
+    // Local copy of the rows for the active dataset
     const [localData, setLocalData] = useState([]);
-    // For new (unsaved) entries: if grouped, store per group; if not, a single object.
+    // For new (unsaved) entries in the active dataset
     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');
+    // 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];
+        if (!raw) {
+            setDataSets([]);
+            setActiveDatasetIndex(0);
+            isInitialLoad.current = false;
+            return;
+        }
+
+        let newDataSets;
+        if (Array.isArray(raw)) {
+            if (
+                raw.length > 0 &&
+                typeof raw[0].created_at === 'string' &&
+                Array.isArray(raw[0].data)
+            ) {
+                newDataSets = raw;
+            } else {
+                newDataSets = [
+                    {
+                        created_at: new Date().toISOString(),
+                        data: raw,
+                    },
+                ];
+            }
+        } else {
+            newDataSets = [
+                {
+                    created_at: new Date().toISOString(),
+                    data: raw,
+                },
+            ];
+        }
+        setDataSets(newDataSets);
+
+        if (isInitialLoad.current) {
+            // On initial load, always select the latest dataset
+            setActiveDatasetIndex(newDataSets.length - 1);
+            isInitialLoad.current = false;
+        } else {
+            // Otherwise, if the current index is valid, keep it; else, select the last
+            setActiveDatasetIndex((prevIndex) =>
+                prevIndex < newDataSets.length
+                    ? prevIndex
+                    : newDataSets.length - 1
+            );
+        }
+    }, [data, schedulingConfig.rows.key]);
+
+    // Whenever activeDatasetIndex changes, sync localData from the chosen dataset
+    useEffect(() => {
+        const activeDataSet = dataSets[activeDatasetIndex];
+        if (activeDataSet && Array.isArray(activeDataSet.data)) {
+            const enrichedData = activeDataSet.data.map((entry, index) => ({
+                ...entry,
+                sort_order: entry.sort_order ?? index + 1,
+            }));
+            setLocalData(sortBySortOrder(enrichedData));
+        } else {
+            setLocalData([]);
+        }
+    }, [dataSets, activeDatasetIndex]);
 
-    // Helper to sort by sort_order without mutating the original array
+    // Helper to sort by sort_order
     const sortBySortOrder = (dataArray) =>
         [...dataArray].sort((a, b) => a.sort_order - b.sort_order);
 
-    // Helper: if there is a column of type 'colour', return that value from the entry.
+    // Return background color if there's a column of type 'colour'
     const getRowBackground = (entry) => {
         const colourColumn = columns.find((col) => col.type === 'colour');
         return colourColumn && entry[colourColumn.id]
@@ -150,7 +213,7 @@ const GenericEditableTable = ({
             : undefined;
     };
 
-    // New helper to calculate total using the updated keys structure
+    // Calculate total for columns of type 'total'
     const calculateTotal = (entry, keys) => {
         let total = 0;
         if (Array.isArray(keys)) {
@@ -164,8 +227,7 @@ const GenericEditableTable = ({
             keys.price &&
             keys.unit
         ) {
-            const priceKeys = keys.price;
-            const unitKeys = keys.unit;
+            const { price: priceKeys, unit: unitKeys } = keys;
             if (unitKeys.length === 1) {
                 const unitValue = parseFloat(entry[unitKeys[0]]) || 0;
                 total = priceKeys.reduce(
@@ -186,24 +248,19 @@ const GenericEditableTable = ({
         return total;
     };
 
-    // On load, enrich the data and sort by sort_order
-    useEffect(() => {
-        const enrichedData = data[rows.key]?.map((entry, index) => ({
-            ...entry,
-            sort_order: entry.sort_order ?? index + 1,
-        }));
-        const sortedData = enrichedData ? sortBySortOrder(enrichedData) : [];
-        setLocalData(sortedData);
-    }, [data, rows.key]);
-
+    // Debounced update to save entire dataSets array
     const debouncedUpdate = useMemo(
         () =>
-            debounce(async (updatedData) => {
+            debounce(async (updatedDataSets) => {
                 try {
+                    // Pass the array of datasets under schedulingConfig.rows.key
+                    const payload = {
+                        [schedulingConfig.rows.key]: updatedDataSets,
+                    };
                     const res = await CustomFetch(
                         `${form.url}/${dataId}`,
                         'PUT',
-                        updatedData
+                        payload
                     );
                     if (!res.error) {
                         if (res.data?.data) {
@@ -216,10 +273,168 @@ const GenericEditableTable = ({
                     console.error('Error updating field:', error);
                 }
             }, 1000),
-        [form.url, dataId, setData]
+        [form.url, dataId, setData, schedulingConfig.rows.key]
     );
 
-    // Group data by category (if defined) and sort each group by sort_order
+    // 1) Handle field change for existing rows
+    const handleFieldChange = (value, fieldId, keyCounter) => {
+        setLocalData((prevLocalData) => {
+            const updatedLocalData = [...prevLocalData];
+            updatedLocalData[keyCounter] = {
+                ...updatedLocalData[keyCounter],
+                [fieldId]: value,
+            };
+
+            // If there's date arithmetic logic
+            columns.forEach((col) => {
+                if (
+                    col.add &&
+                    (fieldId === col.id || fieldId === col.add.from)
+                ) {
+                    const fromVal = updatedLocalData[keyCounter][col.add.from];
+                    const daysVal = parseFloat(
+                        updatedLocalData[keyCounter][col.id]
+                    );
+                    if (fromVal && !isNaN(daysVal)) {
+                        const newDate = new Date(fromVal);
+                        if (!isNaN(newDate)) {
+                            newDate.setDate(newDate.getDate() + daysVal);
+                            const yyyy = newDate.getFullYear();
+                            let mm = newDate.getMonth() + 1;
+                            let dd = newDate.getDate();
+                            if (mm < 10) mm = '0' + mm;
+                            if (dd < 10) dd = '0' + dd;
+                            updatedLocalData[keyCounter][
+                                col.add.to
+                            ] = `${yyyy}-${mm}-${dd}`;
+                        }
+                    }
+                }
+            });
+
+            // Update the active dataset
+            const updatedDataSets = [...dataSets];
+            updatedDataSets[activeDatasetIndex] = {
+                ...updatedDataSets[activeDatasetIndex],
+                data: updatedLocalData,
+            };
+            setDataSets(updatedDataSets);
+
+            // Save
+            debouncedUpdate(updatedDataSets);
+            return updatedLocalData;
+        });
+    };
+
+    // 2) Handle field change for *new* rows (before they're officially added)
+    const handleNewFieldChange = (value, fieldId, groupId = null) => {
+        if (hasCategory) {
+            setNewEntries((prev) => {
+                const updated = {
+                    ...prev,
+                    [groupId]: { ...prev[groupId], [fieldId]: value },
+                };
+                columns.forEach((col) => {
+                    if (
+                        col.add &&
+                        (fieldId === col.id || fieldId === col.add.from)
+                    ) {
+                        const fromVal = updated[groupId][col.add.from];
+                        const daysVal = parseFloat(updated[groupId][col.id]);
+                        if (fromVal && !isNaN(daysVal)) {
+                            const newDate = new Date(fromVal);
+                            if (!isNaN(newDate)) {
+                                newDate.setDate(newDate.getDate() + daysVal);
+                                const yyyy = newDate.getFullYear();
+                                let mm = newDate.getMonth() + 1;
+                                let dd = newDate.getDate();
+                                if (mm < 10) mm = '0' + mm;
+                                if (dd < 10) dd = '0' + dd;
+                                updated[groupId][
+                                    col.add.to
+                                ] = `${yyyy}-${mm}-${dd}`;
+                            }
+                        }
+                    }
+                });
+                return updated;
+            });
+        } else {
+            setNewEntry((prev) => {
+                const updated = { ...prev, [fieldId]: value };
+                columns.forEach((col) => {
+                    if (
+                        col.add &&
+                        (fieldId === col.id || fieldId === col.add.from)
+                    ) {
+                        const fromVal = updated[col.add.from];
+                        const daysVal = parseFloat(updated[col.id]);
+                        if (fromVal && !isNaN(daysVal)) {
+                            const newDate = new Date(fromVal);
+                            if (!isNaN(newDate)) {
+                                newDate.setDate(newDate.getDate() + daysVal);
+                                const yyyy = newDate.getFullYear();
+                                let mm = newDate.getMonth() + 1;
+                                let dd = newDate.getDate();
+                                if (mm < 10) mm = '0' + mm;
+                                if (dd < 10) dd = '0' + dd;
+                                updated[col.add.to] = `${yyyy}-${mm}-${dd}`;
+                            }
+                        }
+                    }
+                });
+                return updated;
+            });
+        }
+    };
+
+    // 3) Adding a new row to the active dataset
+    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;
+        }
+        const maxSortOrder = localData.reduce(
+            (max, row) => Math.max(max, row.sort_order || 0),
+            0
+        );
+        const newRow = {
+            ...newRowData,
+            id: `new-${Date.now()}`,
+            sort_order: maxSortOrder + 1,
+        };
+
+        // If there's a category column, fill it in
+        if (hasCategory && groupId !== 'no_category') {
+            newRow[rows.categoryKey.id] = {
+                id: groupId,
+                [rows.categoryKey.label]: groupId,
+            };
+        }
+
+        const updatedLocalData = [...localData, newRow];
+        setLocalData(updatedLocalData);
+
+        // Update the active dataset
+        const updatedDataSets = [...dataSets];
+        updatedDataSets[activeDatasetIndex] = {
+            ...updatedDataSets[activeDatasetIndex],
+            data: updatedLocalData,
+        };
+        setDataSets(updatedDataSets);
+        debouncedUpdate(updatedDataSets);
+
+        // Reset new-entry state
+        if (hasCategory) {
+            setNewEntries((prev) => ({ ...prev, [groupId]: {} }));
+        } else {
+            setNewEntry({});
+        }
+        toast.success('Row added');
+    };
+
+    // 4) Group data by category (if defined)
     const groupCategoriesByType = (dataArray) => {
         if (!rows.categoryKey) return [];
         const grouped = {};
@@ -231,8 +446,6 @@ const GenericEditableTable = ({
                 : null;
             const categoryId = categoryInfo ? categoryInfo.id : null;
             const groupKey = categoryId || 'no_category';
-            // Use the category's sort_order if provided; otherwise, default to a high number (e.g. 9999)
-
             const catSortOrder =
                 categoryInfo && typeof categoryInfo.sort_order !== 'undefined'
                     ? categoryInfo.sort_order
@@ -244,25 +457,21 @@ const GenericEditableTable = ({
                     category:
                         categoryLabel ||
                         (groupKey === 'no_category' ? 'No Category' : ''),
-                    catSortOrder, // assign the sort order (or fallback)
+                    catSortOrder,
                     entries: [],
                 };
             }
-            grouped[groupKey].entries.push({
-                ...entry,
-                keyCounter: index,
-            });
+            grouped[groupKey].entries.push({ ...entry, keyCounter: index });
         });
 
-        // Sort entries within each group by their universal sort_order
+        // Sort entries within each group
         Object.values(grouped).forEach((group) => {
             group.entries.sort((a, b) => a.sort_order - b.sort_order);
         });
 
-        // Now sort the groups by the cost category's sort_order (catSortOrder)
+        // Sort groups by catSortOrder
         const groupedArray = Object.values(grouped);
         groupedArray.sort((a, b) => {
-            // Optionally, place 'no_category' first (or adjust as needed)
             if (a.id === 'no_category') return -1;
             if (b.id === 'no_category') return 1;
             return a.catSortOrder - b.catSortOrder;
@@ -272,21 +481,14 @@ const GenericEditableTable = ({
     };
 
     const groupedCategories = useMemo(() => {
-        if (hasCategory) {
-            return groupCategoriesByType(localData);
-        }
-        return [];
+        return hasCategory ? groupCategoriesByType(localData) : [];
     }, [localData, hasCategory]);
 
-    // Copy all values from a column to the clipboard
+    // 5) Column copy
     const handleColumnCopy = (column, group = null) => {
-        let values;
-
-        if (group) {
-            values = group.entries.map((entry) => entry[column.id]);
-        } else {
-            values = localData.map((entry) => entry[column.id]);
-        }
+        let values = group
+            ? group.entries.map((entry) => entry[column.id])
+            : localData.map((entry) => entry[column.id]);
 
         const textToCopy = values
             .filter((val) => val !== undefined && val !== null)
@@ -306,49 +508,7 @@ const GenericEditableTable = ({
             .catch(() => toast.error('Failed to copy to clipboard'));
     };
 
-    // Updated handleFieldChange to support "add" functionality
-    const handleFieldChange = (value, fieldId, keyCounter) => {
-        setLocalData((prev) => {
-            const updatedDetail = [...prev];
-            updatedDetail[keyCounter] = {
-                ...updatedDetail[keyCounter],
-                [fieldId]: value,
-            };
-
-            // Loop through columns to see if any has an "add" property.
-            columns.forEach((col) => {
-                if (
-                    col.add &&
-                    (fieldId === col.id || fieldId === col.add.from)
-                ) {
-                    const fromVal = updatedDetail[keyCounter][col.add.from];
-                    const daysVal = parseFloat(
-                        updatedDetail[keyCounter][col.id]
-                    );
-                    if (fromVal && !isNaN(daysVal)) {
-                        const newDate = new Date(fromVal);
-                        if (!isNaN(newDate)) {
-                            newDate.setDate(newDate.getDate() + daysVal);
-                            // Format the date as YYYY-MM-DD
-                            const yyyy = newDate.getFullYear();
-                            let mm = newDate.getMonth() + 1;
-                            let dd = newDate.getDate();
-                            if (mm < 10) mm = '0' + mm;
-                            if (dd < 10) dd = '0' + dd;
-                            updatedDetail[keyCounter][
-                                col.add.to
-                            ] = `${yyyy}-${mm}-${dd}`;
-                        }
-                    }
-                }
-            });
-
-            debouncedUpdate({ [rows.key]: updatedDetail });
-            return updatedDetail;
-        });
-    };
-
-    // For grouped data, sort handler remains unchanged
+    // 6) Sorting: grouped
     const handleSortChangeGrouped = (groupId, entryId, direction) => {
         if (!hasCategory) return;
         setLocalData((prev) => {
@@ -356,12 +516,10 @@ const GenericEditableTable = ({
             const group = groupCategoriesByType(updatedDetail).find(
                 (grp) => grp.id === groupId
             );
-
             if (group) {
                 const index = group.entries.findIndex(
                     (entry) => entry.id === entryId
                 );
-
                 if (
                     (direction === 'up' && index > 0) ||
                     (direction === 'down' && index < group.entries.length - 1)
@@ -376,6 +534,7 @@ const GenericEditableTable = ({
                         group.entries[index].sort_order,
                     ];
 
+                    // Rebuild array with swapped sort_order
                     const reordered = updatedDetail.map((item) => {
                         const found = group.entries.find(
                             (e) => e.id === item.id
@@ -385,7 +544,15 @@ const GenericEditableTable = ({
                             : item;
                     });
 
-                    debouncedUpdate({ [rows.key]: reordered });
+                    // Update the active dataset
+                    const updatedDataSets = [...dataSets];
+                    updatedDataSets[activeDatasetIndex] = {
+                        ...updatedDataSets[activeDatasetIndex],
+                        data: reordered,
+                    };
+                    setDataSets(updatedDataSets);
+                    debouncedUpdate(updatedDataSets);
+
                     return reordered;
                 }
             }
@@ -393,7 +560,7 @@ const GenericEditableTable = ({
         });
     };
 
-    // For ungrouped data, sort before swapping items.
+    // 7) Sorting: ungrouped
     const handleSortChangeUngrouped = (entryId, direction) => {
         setLocalData((prev) => {
             const sortedData = sortBySortOrder(prev);
@@ -405,18 +572,26 @@ const GenericEditableTable = ({
             ) {
                 return prev;
             }
-
             const swapIndex = direction === 'up' ? index - 1 : index + 1;
             [sortedData[index].sort_order, sortedData[swapIndex].sort_order] = [
                 sortedData[swapIndex].sort_order,
                 sortedData[index].sort_order,
             ];
 
-            debouncedUpdate({ [rows.key]: sortedData });
+            // Update the active dataset
+            const updatedDataSets = [...dataSets];
+            updatedDataSets[activeDatasetIndex] = {
+                ...updatedDataSets[activeDatasetIndex],
+                data: sortedData,
+            };
+            setDataSets(updatedDataSets);
+            debouncedUpdate(updatedDataSets);
+
             return sortedData;
         });
     };
 
+    // 8) Deletion
     const handleDeleteRow = (entry) => {
         confirmAlert({
             title: 'Confirm to Delete',
@@ -429,19 +604,23 @@ const GenericEditableTable = ({
                             const updatedDetail = prev.filter(
                                 (item) => item.id !== entry.id
                             );
-                            debouncedUpdate({ [rows.key]: updatedDetail });
+                            const updatedDataSets = [...dataSets];
+                            updatedDataSets[activeDatasetIndex] = {
+                                ...updatedDataSets[activeDatasetIndex],
+                                data: updatedDetail,
+                            };
+                            setDataSets(updatedDataSets);
+                            debouncedUpdate(updatedDataSets);
                             return updatedDetail;
                         });
                     },
                 },
-                {
-                    label: 'No',
-                },
+                { label: 'No' },
             ],
         });
     };
 
-    // Render existing row field (same as before)
+    // RENDERING HELPERS
     const renderScheduledTableField = (entry, column, keyCounter) => {
         if (!entry || !column) return null;
 
@@ -538,8 +717,8 @@ const GenericEditableTable = ({
                         settings={{ id: column.id, compact: true }}
                         className={styles.selectFullWidth}
                         multi={false}
-                        onChange={(value) =>
-                            handleFieldChange(value, column.id, keyCounter)
+                        onChange={(val) =>
+                            handleFieldChange(val, column.id, keyCounter)
                         }
                         inputValue={entry[column.id] || ''}
                         options={multiOptions}
@@ -571,117 +750,7 @@ const GenericEditableTable = ({
         }
     };
 
-    // --- New row functions for inline creation ---
-
-    // Updated handleNewFieldChange to support "add" functionality in new rows
-    const handleNewFieldChange = (value, fieldId, groupId = null) => {
-        if (hasCategory) {
-            setNewEntries((prev) => {
-                const updated = {
-                    ...prev,
-                    [groupId]: {
-                        ...prev[groupId],
-                        [fieldId]: value,
-                    },
-                };
-                columns.forEach((col) => {
-                    if (
-                        col.add &&
-                        (fieldId === col.id || fieldId === col.add.from)
-                    ) {
-                        const fromVal = updated[groupId][col.add.from];
-                        const daysVal = parseFloat(updated[groupId][col.id]);
-                        if (fromVal && !isNaN(daysVal)) {
-                            const newDate = new Date(fromVal);
-                            if (!isNaN(newDate)) {
-                                newDate.setDate(newDate.getDate() + daysVal);
-                                const yyyy = newDate.getFullYear();
-                                let mm = newDate.getMonth() + 1;
-                                let dd = newDate.getDate();
-                                if (mm < 10) mm = '0' + mm;
-                                if (dd < 10) dd = '0' + dd;
-                                updated[groupId][
-                                    col.add.to
-                                ] = `${yyyy}-${mm}-${dd}`;
-                            }
-                        }
-                    }
-                });
-                return updated;
-            });
-        } else {
-            setNewEntry((prev) => {
-                const updated = {
-                    ...prev,
-                    [fieldId]: value,
-                };
-                columns.forEach((col) => {
-                    if (
-                        col.add &&
-                        (fieldId === col.id || fieldId === col.add.from)
-                    ) {
-                        const fromVal = updated[col.add.from];
-                        const daysVal = parseFloat(updated[col.id]);
-                        if (fromVal && !isNaN(daysVal)) {
-                            const newDate = new Date(fromVal);
-                            if (!isNaN(newDate)) {
-                                newDate.setDate(newDate.getDate() + daysVal);
-                                const yyyy = newDate.getFullYear();
-                                let mm = newDate.getMonth() + 1;
-                                let dd = newDate.getDate();
-                                if (mm < 10) mm = '0' + mm;
-                                if (dd < 10) dd = '0' + dd;
-                                updated[col.add.to] = `${yyyy}-${mm}-${dd}`;
-                            }
-                        }
-                    }
-                });
-                return updated;
-            });
-        }
-    };
-
-    // 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)
+    // Render new row field
     const renderNewRowField = (newRowData, column, groupId = null) => {
         const value = newRowData ? newRowData[column.id] : '';
         switch (column.type) {
@@ -775,8 +844,8 @@ const GenericEditableTable = ({
                         settings={{ id: column.id, compact: true }}
                         className={styles.selectFullWidth}
                         multi={false}
-                        onChange={(value) =>
-                            handleNewFieldChange(value, column.id, groupId)
+                        onChange={(val) =>
+                            handleNewFieldChange(val, column.id, groupId)
                         }
                         inputValue={value || ''}
                         options={multiOptions}
@@ -807,7 +876,7 @@ const GenericEditableTable = ({
         }
     };
 
-    // Render the new row form (for grouped or ungrouped data)
+    // Inline form for adding a new row
     const renderNewRowForm = (groupId = null) => {
         const newRowData = hasCategory ? newEntries[groupId] || {} : newEntry;
         return (
@@ -837,7 +906,7 @@ const GenericEditableTable = ({
         );
     };
 
-    // Render header cell with a label and copy icon
+    // Header cell with optional copy icon
     const renderHeaderCell = (column, group = null) => (
         <th
             key={`${column.id}${group ? `-${group.id}` : ''}`}
@@ -866,11 +935,51 @@ const GenericEditableTable = ({
         </th>
     );
 
+    // Dataset selector at the top
+    const renderDatasetSelector = () =>
+        schedulingConfig.addDataset && (
+            <div className={styles.datasetSelector}>
+                <label htmlFor="dataset-select">Select Dataset:</label>
+                <select
+                    id="dataset-select"
+                    value={activeDatasetIndex}
+                    onChange={(e) =>
+                        setActiveDatasetIndex(Number(e.target.value))
+                    }
+                >
+                    {dataSets.map((ds, index) => (
+                        <option key={index} value={index}>
+                            {new Date(ds.created_at).toLocaleString()}
+                        </option>
+                    ))}
+                </select>
+                <button onClick={handleAddNewDataset}>New Dataset</button>
+            </div>
+        );
+
+    // Create a new dataset by cloning the current active one
+    const handleAddNewDataset = () => {
+        const currentActiveData = localData;
+        const newDataset = {
+            created_at: new Date().toISOString(),
+            data: currentActiveData.map((row) => ({ ...row })), // shallow clone
+        };
+        const updatedDataSets = [...dataSets, newDataset];
+        setDataSets(updatedDataSets);
+        // Always pick the newly created dataset
+        setActiveDatasetIndex(updatedDataSets.length - 1);
+        debouncedUpdate(updatedDataSets); // Save immediately
+        toast.success('New dataset added');
+    };
+
     return (
         <div className={styles.gridtxt}>
+            {renderDatasetSelector()}
+
             <div className={styles.gridtxt__header}>
                 <span>{title || 'Estimation Schedule'}</span>
             </div>
+
             {hasCategory ? (
                 groupedCategories.length > 0 ? (
                     <table className={styles.schedulingTable}>
@@ -888,6 +997,7 @@ const GenericEditableTable = ({
                                         )}
                                         <th style={{ width: '5%' }}></th>
                                     </tr>
+
                                     {group.entries.map((entry, idx) => (
                                         <tr
                                             key={entry.id}
@@ -965,16 +1075,23 @@ 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 && (
+
+                                    {columns.findIndex(
+                                        (col) => col.type === 'total'
+                                    ) !== -1 && (
                                         <tr className={styles.subtotalRow}>
                                             {columns.map((col, index) => {
+                                                const totalColIndex =
+                                                    columns.findIndex(
+                                                        (c) =>
+                                                            c.type === 'total'
+                                                    );
                                                 if (
                                                     index ===
-                                                        totalColumnIndex - 1 &&
-                                                    totalColumnIndex > 0
+                                                        totalColIndex - 1 &&
+                                                    index > 0
                                                 ) {
                                                     return (
                                                         <td key={col.id}>
@@ -982,9 +1099,7 @@ const GenericEditableTable = ({
                                                         </td>
                                                     );
                                                 }
-                                                if (
-                                                    index === totalColumnIndex
-                                                ) {
+                                                if (index === totalColIndex) {
                                                     const groupTotal =
                                                         group.entries.reduce(
                                                             (sum, entry) =>
@@ -992,7 +1107,7 @@ const GenericEditableTable = ({
                                                                 calculateTotal(
                                                                     entry,
                                                                     columns[
-                                                                        totalColumnIndex
+                                                                        totalColIndex
                                                                     ].keys
                                                                 ),
                                                             0
@@ -1096,19 +1211,23 @@ 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 && (
+
+                        {columns.findIndex((col) => col.type === 'total') !==
+                            -1 && (
                             <tr className={styles.subtotalRow}>
                                 {columns.map((col, index) => {
+                                    const totalColIndex = columns.findIndex(
+                                        (c) => c.type === 'total'
+                                    );
                                     if (
-                                        index === totalColumnIndex - 1 &&
-                                        totalColumnIndex > 0
+                                        index === totalColIndex - 1 &&
+                                        index > 0
                                     ) {
                                         return <td key={col.id}>Subtotal</td>;
                                     }
-                                    if (index === totalColumnIndex) {
+                                    if (index === totalColIndex) {
                                         const overallTotal = sortBySortOrder(
                                             localData
                                         ).reduce(
@@ -1116,8 +1235,7 @@ const GenericEditableTable = ({
                                                 sum +
                                                 calculateTotal(
                                                     entry,
-                                                    columns[totalColumnIndex]
-                                                        .keys
+                                                    columns[totalColIndex].keys
                                                 ),
                                             0
                                         );

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

@@ -358,3 +358,51 @@
     border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
     border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3);
 }
+
+.datasetSelector {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem 1rem;
+    background: rgba(var(--primary-rgb), 0.05);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-radius: var(--br);
+
+    label {
+        font-size: 0.9rem;
+        font-weight: bold;
+        color: var(--paragraph-color);
+    }
+
+    select {
+        padding: 0.4rem 0.75rem;
+        font-size: 0.9rem;
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        border-radius: var(--br);
+        background: #fff;
+        outline: none;
+        box-shadow: none;
+    }
+
+    /* New Dataset button styling to match .btn_compact */
+    button {
+        display: inline-block;
+        padding: 0.4rem 0.75rem;
+        font-size: 1rem;
+        color: var(--tertiary-color);
+        text-decoration: none;
+        background: var(--primary-color);
+        border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+        border-radius: var(--br);
+        outline: none;
+        cursor: pointer;
+        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);
+        }
+    }
+}