@visns-studio/visns-components 5.0.11 → 5.0.13

package/package.json

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

package/src/components/crm/Field.jsx

@@ -207,6 +207,12 @@ function Field({
                         filter.orderBy = s.orderBy;
                     }
 
+                    if (a.where) {
+                        forEach(a.where, (w) => {
+                            filter.where.push(w);
+                        });
+                    }
+
                     CustomFetch(s.child.url, 'POST', filter, function (result) {
                         childDropdownCallback({
                             id: s.child.id,
@@ -314,7 +320,7 @@ function Field({
                         <span>{settings.label}</span>
                     </div>
                 );
-            } else if (['richeditor'].includes(settings.type)) {
+            } else if (['richeditor', 'textarea'].includes(settings.type)) {
                 return settings.label;
             }
         }
@@ -1664,6 +1670,7 @@ function Field({
                 'signature',
                 'table_radio',
                 'table_text',
+                'textarea',
                 'time',
                 'toggle',
             ].includes(settings.type)
@@ -1882,7 +1889,9 @@ function Field({
         <div className={formItemClass} style={formItemStyle}>
             <label
                 className={
-                    settings.type === 'richeditor' ? '' : styles.fi__label
+                    ['richeditor', 'textarea'].includes(settings.type)
+                        ? ''
+                        : styles.fi__label
                 }
             >
                 {renderLabel()}

package/src/components/crm/Form.jsx

@@ -621,8 +621,6 @@ function Form({
                         }
                     });
 
-                    console.info(_inputClass);
-
                     setInputClass(_inputClass);
                 }
 
@@ -672,7 +670,14 @@ function Form({
 
                     if (!_.isEmpty(formData)) {
                         Object.keys(formData).forEach((item) => {
-                            if (formData[item] instanceof File) {
+                            const value = formData[item];
+
+                            // Check if it's a single File or an array of File objects
+                            if (
+                                value instanceof File ||
+                                (Array.isArray(value) &&
+                                    value.every((file) => file instanceof File))
+                            ) {
                                 fileUpload = true;
                                 fileKey = item;
 
@@ -842,8 +847,6 @@ function Form({
     const fetchData = async () => {
         let _formData = { ...formData };
 
-        console.info('aaa', formType, columnId);
-
         if (formSettings.fields.length > 0) {
             formSettings.fields.forEach((item) => {
                 const { id, value, type, parent, urlParam } = item;

package/src/components/crm/MultiSelect.jsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import CustomFetch from './Fetch';
-import SelectList from './SelectList';
 import Select, { createFilter, components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import styles from './styles/AsyncSelect.module.scss';
 
-// Custom Option component to add a second line of text
 const CustomOption = (props) => (
     <components.Option {...props}>
         <div>
@@ -34,34 +32,49 @@ function MultiSelect({
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
 
-    useEffect(() => {
-        const _options = Array.isArray(options)
-            ? options.map((a) => ({
-                  value: a.id,
-                  label: a.label || a.name || a.description || 'Unknown',
-                  description: a.description || '', // Include description field
-                  ...a,
-              }))
-            : [];
-        setSelectOptions(_options);
+    // Memoize transformed options
+    const memoizedOptions = useMemo(() => {
+        return options
+            .filter((a) => a?.label || a?.name || a?.description) // Filter out options with no label, name, or description
+            .map((a) => ({
+                value: a?.id,
+                label: a?.label || a?.name || a?.description || 'Unknown',
+                description: a?.description || '',
+                ...a,
+            }));
     }, [options]);
 
-    useEffect(() => {
-        const normalizeInputValue = (value) => {
-            // Ensure value is an array, wrapping single items if necessary
-            return Array.isArray(value) ? value : value ? [value] : [];
-        };
-
-        const _values = normalizeInputValue(inputValue).map((a) => ({
-            value: a.id,
-            label: a.label || a.name || a.description || 'Unknown',
-            description: a.description || '', // Include description field
-            ...a,
-        }));
+    // Memoize transformed input values
+    const memoizedInputValue = useMemo(() => {
+        const normalizeInputValue = (value) =>
+            Array.isArray(value) ? value : value ? [value] : [];
 
-        setSelectValue(_values);
+        return normalizeInputValue(inputValue)
+            .filter((a) => a?.label || a?.name || a?.description) // Filter out values with no label, name, or description
+            .map((a) => ({
+                value: a?.id,
+                label: a?.label || a?.name || a?.description || 'Unknown',
+                description: a?.description || '',
+                ...a,
+            }));
     }, [inputValue]);
 
+    // Set options when memoizedOptions changes
+    useEffect(() => {
+        if (JSON.stringify(selectOptions) !== JSON.stringify(memoizedOptions)) {
+            setSelectOptions(memoizedOptions);
+        }
+    }, [memoizedOptions, selectOptions]);
+
+    // Set value when memoizedInputValue changes
+    useEffect(() => {
+        if (
+            JSON.stringify(selectValue) !== JSON.stringify(memoizedInputValue)
+        ) {
+            setSelectValue(memoizedInputValue);
+        }
+    }, [memoizedInputValue, selectValue]);
+
     const handleCreate = async (inputValue) => {
         if (creatableConfig.url && creatableConfig.method) {
             const res = await CustomFetch(
@@ -74,17 +87,15 @@ function MultiSelect({
                 const newOption = {
                     value: res.data.id,
                     label: res.data.label || inputValue,
-                    description: res.data.description || 'Newly created item', // Default description for new items
+                    description: res.data.description || 'Newly created item',
                     ...res.data,
                 };
 
-                // Update options and trigger onChange with the new option
                 setSelectOptions((prevOptions) => [...prevOptions, newOption]);
                 setSelectValue((prevValues) =>
                     multi ? [...prevValues, newOption] : [newOption]
                 );
 
-                // Trigger onChange with the new option
                 onChange(
                     multi ? [...selectValue, newOption] : newOption,
                     { action: 'create-option' },
@@ -103,7 +114,7 @@ function MultiSelect({
             isSearchable
             isMulti={multi}
             filterOption={createFilter({ ignoreAccents: false })}
-            components={{ Option: CustomOption }} // Use the custom Option component
+            components={{ Option: CustomOption }}
             options={selectOptions}
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
@@ -125,8 +136,8 @@ function MultiSelect({
                 }),
             }}
             value={selectValue}
-            onCreateOption={isCreatable ? handleCreate : undefined} // Only add if creatable
-            placeholder={placeholder ? placeholder : 'Select...'}
+            onCreateOption={isCreatable ? handleCreate : undefined}
+            placeholder={placeholder || 'Select...'}
         />
     );
 }

package/src/components/crm/auth/Login.jsx

@@ -28,7 +28,15 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
         let content =
             providers && providers.length > 0 ? (
                 <div className="formItem fwItem lastItem forgotten">
-                    <span>OR</span>
+                    <span
+                        style={{
+                            display: 'block',
+                            textAlign: 'center',
+                            width: '100%',
+                        }}
+                    >
+                        OR
+                    </span>
                 </div>
             ) : null;
 

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

@@ -1,6 +1,6 @@
 import '../../styles/global.css';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import moment from 'moment';
 import parse from 'html-react-parser';
@@ -28,8 +28,8 @@ import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import Form from '../Form';
 import GenericDynamic from './GenericDynamic';
+import GenericEditableTable from './GenericEditableTable';
 import QrCode from '../QrCode';
-import SortableList from '../sorting/List';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
@@ -55,9 +55,11 @@ function GenericDetail({
 
     /** General States */
     const [activeStage, setActiveStage] = useState('');
+    const [activeTabConfig, setActiveTabConfig] = useState(null);
     const [config, setConfig] = useState({});
     const [data, setData] = useState({});
     const [dataReload, setDataReload] = useState(0);
+    const [preloadedOptions, setPreloadedOptions] = useState({});
     const [rowsSelected, setRowsSelected] = useState({});
     const [subnav, setSubnav] = useState([]);
     const [total, setTotal] = useState(0);
@@ -1321,9 +1323,15 @@ function GenericDetail({
                                 return null;
                             }
                         case 'scheduling':
-                            return renderSchedulingTable(
-                                activeTabConfig,
-                                routeParams[urlParam]
+                            return (
+                                <GenericEditableTable
+                                    schedulingConfig={activeTabConfig}
+                                    data={data}
+                                    dataId={routeParams[urlParam]}
+                                    handleReload={handleReload}
+                                    preloadedOptions={preloadedOptions}
+                                    userProfile={userProfile}
+                                />
                             );
                         default:
                             return null;
@@ -1333,298 +1341,50 @@ function GenericDetail({
         }
     };
 
-    const renderSchedulingTable = (config, dataId) => {
-        const { columns, rows } = config;
-        const scheduleData = data[rows.key]; // Access schedule data directly from the rows
-
-        // Group categories by their type (e.g., Concrete Work, Design Services)
-        const groupedCategories = groupCategoriesByType(scheduleData, rows);
-
-        // Count the number of total columns
-        const totalColumns = columns.filter((column) => column.total).length;
-
-        return (
-            <div className={styles.gridtxt}>
-                <div className={styles.gridtxt__header}>
-                    <span>{config.title || 'Estimation Schedule'}</span>
-                </div>
+    /** General Hooks */
+    useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
 
-                {groupedCategories.length > 0 ? (
-                    <table className={styles.schedulingTable}>
-                        <thead>
-                            <tr>
-                                {columns.map((column) => (
-                                    <th
-                                        key={column.id}
-                                        style={{
-                                            width: column.width || 'auto',
-                                            textAlign:
-                                                column.type === 'currency'
-                                                    ? 'right'
-                                                    : 'left',
-                                        }}
-                                    >
-                                        {column.label}
-                                    </th>
-                                ))}
-                                <th style={{ width: '5%' }}></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {groupedCategories.map((group) => (
-                                <React.Fragment key={group.category}>
-                                    {/* Category Row */}
-                                    <tr className={styles.categoryRow}>
-                                        <td colSpan={columns.length + 1}>
-                                            <strong>{group.category}</strong>
-                                        </td>
-                                    </tr>
-
-                                    {/* Data Rows */}
-                                    {group.entries.map((entry, idx) => (
-                                        <tr
-                                            key={`row-${group.category}-${idx}`}
-                                        >
-                                            {columns.map((column) => (
-                                                <td
-                                                    key={`column-${column.id}-${idx}`}
-                                                    style={{
-                                                        textAlign:
-                                                            column.type ===
-                                                            'currency'
-                                                                ? 'right'
-                                                                : 'left',
-                                                    }}
-                                                >
-                                                    {column.type === 'currency'
-                                                        ? formatCurrency(
-                                                              entry[column.id]
-                                                          )
-                                                        : entry[column.id]
-                                                              ?.label ||
-                                                          entry[column.id] ||
-                                                          ''}
-                                                </td>
-                                            ))}
-                                            <td>
-                                                {/* Edit Icon */}
-                                                <span
-                                                    data-tooltip-id="system-tooltip"
-                                                    data-tooltip-content="Edit"
-                                                    style={{
-                                                        cursor: 'pointer',
-                                                        marginRight: '10px',
-                                                    }}
-                                                    onClick={() =>
-                                                        modalOpen(
-                                                            'update',
-                                                            entry.id
-                                                        )
-                                                    }
-                                                >
-                                                    <Pencil
-                                                        size={18}
-                                                        strokeWidth={2}
-                                                    />
-                                                </span>
-
-                                                {/* Delete Icon */}
-                                                <span
-                                                    data-tooltip-id="system-tooltip"
-                                                    data-tooltip-content="Delete"
-                                                    style={{
-                                                        cursor: 'pointer',
-                                                    }}
-                                                    onClick={() =>
-                                                        handleDeleteRow(
-                                                            entry,
-                                                            config,
-                                                            dataId
-                                                        )
-                                                    }
-                                                >
-                                                    <TrashCan
-                                                        size={18}
-                                                        strokeWidth={2}
-                                                    />
-                                                </span>
-                                            </td>
-                                        </tr>
-                                    ))}
-
-                                    {/* Total Cost Row */}
-                                    <tr className={styles.totalRow}>
-                                        <td
-                                            colSpan={
-                                                columns.length - totalColumns
-                                            }
-                                        >
-                                            <strong>Total Cost</strong>
-                                        </td>
-                                        {columns.map((c) =>
-                                            c.total ? (
-                                                <td
-                                                    key={c.id}
-                                                    style={{
-                                                        textAlign: 'right',
-                                                    }}
-                                                >
-                                                    {calculateTotalCost(
-                                                        group.entries,
-                                                        c.id
-                                                    )}
-                                                </td>
-                                            ) : null
-                                        )}
-                                        <td></td>
-                                    </tr>
-                                </React.Fragment>
-                            ))}
-                        </tbody>
-                    </table>
-                ) : (
-                    <div className={styles.noDataMessage}>
-                        <p>No scheduling data has been added.</p>
-                    </div>
-                )}
-
-                {config.form && (
-                    <div className={styles.polActions}>
-                        <button
-                            className={styles.btn}
-                            onClick={() => modalOpen('create', 0)}
-                        >
-                            Add
-                        </button>
-                    </div>
-                )}
-            </div>
-        );
-    };
+            if (activeTab) {
+                const newActiveTabConfig = tabs.find(
+                    (t) => t.id === activeTab.id
+                );
+                setActiveTabConfig(newActiveTabConfig); // Update state
+            }
+        }
+    }, [subnav, tabs]);
 
-    const handleDeleteRow = (d, c, dataId) => {
-        confirmAlert({
-            title: 'Delete Item',
-            message:
-                d.description && d.description !== ''
-                    ? d.description
-                    : `Are you sure you want to delete ${
-                          d.name ? d.name : d.label ? d.label : 'this item'
-                      }?`,
-            buttons: [
-                {
-                    label: 'Yes',
-                    onClick: () => {
-                        let deleteForm = {
-                            url: '',
-                            method: 'DELETE',
-                            payload: {},
-                        };
-
-                        deleteForm.url = `${c.form.url}/json/delete`;
-                        deleteForm.method = 'POST';
-                        deleteForm.payload = {
-                            id: d[c.form.primaryKey],
-                            dataId: dataId,
-                            key: c.form.jsonKey || '',
-                        };
-
-                        CustomFetch(
-                            deleteForm.url,
-                            deleteForm.method,
-                            deleteForm.payload,
-                            (result) => {
-                                if (result.error === '') {
-                                    handleReload();
-
-                                    toast.success(
-                                        `The selected item has been deleted.`
-                                    );
-                                } else {
-                                    toast.error(
-                                        <div>{parse(result.error)}</div>
-                                    );
-                                }
-                            }
+    useEffect(() => {
+        const fetchDropdownOptions = async () => {
+            if (activeTabConfig?.columns) {
+                const ajaxColumns = activeTabConfig.columns.filter(
+                    (column) =>
+                        ['dropdown-ajax', 'multi-dropdown-ajax'].includes(
+                            column.type
+                        ) && column.url
+                );
+
+                const options = {};
+                for (const column of ajaxColumns) {
+                    try {
+                        const res = await CustomFetch(column.url, 'POST');
+                        options[column.id] = res.data.data || res.data || []; // Assume API returns options in the expected format
+                    } catch (error) {
+                        console.error(
+                            `Error fetching options for ${column.id}:`,
+                            error
                         );
-                    },
-                },
-                {
-                    label: 'No',
-                    onClick: () => {},
-                },
-            ],
-        });
-    };
-
-    // Function to group categories by their type (e.g., Concrete Work, Miscellaneous, etc.)
-    const groupCategoriesByType = (data, rows) => {
-        const grouped = {};
-
-        if (data) {
-            data.forEach((category) => {
-                const categoryType =
-                    category[rows.categoryKey.id]?.[rows.categoryKey.label] ||
-                    'Miscellaneous'; // Default to 'Miscellaneous' if no category is found
-
-                const categoryId =
-                    category[rows.categoryKey.id]?.id ||
-                    Number.MAX_SAFE_INTEGER; // Default to max integer if no id is found
-
-                if (!grouped[categoryId]) {
-                    grouped[categoryId] = {
-                        id: categoryId,
-                        category: categoryType,
-                        entries: [],
-                    };
+                    }
                 }
-                grouped[categoryId].entries.push(category);
-            });
-        }
-
-        return Object.values(grouped).sort((a, b) => a.id - b.id); // Sort categories by id
-    };
 
-    // Function to calculate the total cost for a group
-    const calculateTotalCost = (entries, id) => {
-        if (!entries || entries.length === 0 || !id) {
-            return '$0.00'; // Return $0.00 if entries are empty or id is not provided
-        }
-
-        let total = 0;
-
-        entries.forEach((entry) => {
-            if (entry && entry[id]) {
-                // Check if the entry and the specific field exist
-                // Parse the cost from the field and remove non-numeric characters
-                const cost =
-                    parseFloat(
-                        entry[id].toString().replace(/[^0-9.-]+/g, '')
-                    ) || 0;
-                total += cost;
+                setPreloadedOptions(options);
             }
-        });
-
-        // Format the total cost with commas and return it
-        return `$${total.toLocaleString('en-AU', {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        })}`;
-    };
+        };
 
-    // Function to format currency values with commas and a currency symbol
-    const formatCurrency = (value) => {
-        if (value) {
-            const cost = parseFloat(value.replace(/[^0-9.-]+/g, '')) || 0; // Remove any non-numeric characters
-            return `$${cost.toLocaleString('en-AU', {
-                minimumFractionDigits: 2,
-                maximumFractionDigits: 2,
-            })}`;
-        }
-        return ''; // Return empty if value is not provided
-    };
+        fetchDropdownOptions();
+    }, [activeTabConfig]); // Depend on activeTabConfig
 
-    /** General Hooks */
     useEffect(() => {
         const handleResize = () => {
             setWindowHeight(window.innerHeight);

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

@@ -0,0 +1,341 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash.debounce';
+import { toast } from 'react-toastify';
+import Popup from 'reactjs-popup';
+import { confirmAlert } from 'react-confirm-alert';
+import { TrashCan, ArrowUp, ArrowDown } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+import Form from '../Form';
+import MultiSelect from '../MultiSelect';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
+import styles from './styles/GenericEditableTable.module.scss';
+
+const GenericEditableTable = ({
+    schedulingConfig,
+    data,
+    dataId,
+    handleReload,
+    preloadedOptions,
+    userProfile,
+}) => {
+    const { columns, rows, form } = schedulingConfig;
+
+    const [localData, setLocalData] = useState([]);
+    const [groupedCategories, setGroupedCategories] = useState([]);
+
+    useEffect(() => {
+        const enrichedData = data[rows.key]?.map((entry, index) => ({
+            ...entry,
+            sort_order: entry.sort_order ?? index + 1,
+        }));
+        setLocalData(enrichedData || []);
+    }, [data, rows.key]);
+
+    const debouncedUpdate = useMemo(
+        () =>
+            debounce(async (updatedData) => {
+                try {
+                    const res = await CustomFetch(
+                        `${form.url}/${dataId}`,
+                        'PUT',
+                        updatedData
+                    );
+                    if (!res.error) {
+                        toast.success('Template updated successfully');
+                    } else {
+                        toast.error(res.error);
+                    }
+                } catch (error) {
+                    console.error('Error updating field:', error);
+                }
+            }, 1000),
+        []
+    );
+
+    const groupCategoriesByType = (data) => {
+        const grouped = {};
+        data.forEach((category) => {
+            const categoryType =
+                category[rows.categoryKey.id]?.[rows.categoryKey.label] ||
+                'Miscellaneous';
+
+            const categoryId =
+                category[rows.categoryKey.id]?.id || Number.MAX_SAFE_INTEGER;
+
+            if (!grouped[categoryId]) {
+                grouped[categoryId] = {
+                    id: categoryId,
+                    category: categoryType,
+                    entries: [],
+                };
+            }
+            grouped[categoryId].entries.push(category);
+        });
+
+        Object.values(grouped).forEach((group) => {
+            group.entries.sort((a, b) => a.sort_order - b.sort_order);
+        });
+
+        return Object.values(grouped);
+    };
+
+    const handleFieldChange = (value, fieldId, keyCounter) => {
+        setLocalData((prev) => {
+            const updatedDetail = [...prev];
+            updatedDetail[keyCounter] = {
+                ...updatedDetail[keyCounter],
+                [fieldId]: value,
+            };
+
+            debouncedUpdate({ detail: updatedDetail });
+
+            return updatedDetail;
+        });
+    };
+
+    const handleSortChange = (groupId, entryId, direction) => {
+        setLocalData((prev) => {
+            const updatedDetail = [...prev];
+            const group = groupCategoriesByType(updatedDetail).find(
+                (group) => group.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)
+                ) {
+                    const swapIndex =
+                        direction === 'up' ? index - 1 : index + 1;
+                    [
+                        group.entries[index].sort_order,
+                        group.entries[swapIndex].sort_order,
+                    ] = [
+                        group.entries[swapIndex].sort_order,
+                        group.entries[index].sort_order,
+                    ];
+
+                    const reordered = updatedDetail.map((item) => {
+                        const entry = group.entries.find(
+                            (e) => e.id === item.id
+                        );
+                        return entry
+                            ? { ...item, sort_order: entry.sort_order }
+                            : item;
+                    });
+
+                    debouncedUpdate({ detail: reordered });
+                    return reordered;
+                }
+            }
+
+            return updatedDetail;
+        });
+    };
+
+    const renderScheduledTableField = (entry, column, keyCounter) => {
+        if (!entry || !column) return null;
+
+        switch (column.type) {
+            case 'currency':
+            case 'number':
+                return (
+                    <input
+                        type="text"
+                        value={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                        style={{ textAlign: 'right' }}
+                    />
+                );
+            case 'dropdown':
+                return (
+                    <select
+                        value={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                    >
+                        {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={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                    >
+                        <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,
+                        }}
+                        className={styles.selectFullWidth}
+                        multi={false}
+                        onChange={(value) =>
+                            handleFieldChange(value, column.id, keyCounter)
+                        }
+                        inputValue={entry[column.id] || ''}
+                        options={multiOptions}
+                    />
+                );
+            default:
+                return (
+                    <input
+                        type="text"
+                        defaultValue={entry[column.id] || ''}
+                        onChange={(e) =>
+                            handleFieldChange(
+                                e.target.value,
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                    />
+                );
+        }
+    };
+
+    useEffect(() => {
+        setGroupedCategories(groupCategoriesByType(localData));
+    }, [localData]);
+
+    return (
+        <div className={styles.gridtxt}>
+            <div className={styles.gridtxt__header}>
+                <span>{schedulingConfig.title || 'Estimation Schedule'}</span>
+            </div>
+            {groupedCategories.length > 0 ? (
+                <table className={styles.schedulingTable}>
+                    <thead>
+                        <tr>
+                            {columns.map((column) => (
+                                <th
+                                    key={column.id}
+                                    style={{ width: column.width || 'auto' }}
+                                >
+                                    {column.label}
+                                </th>
+                            ))}
+                            <th style={{ width: '5%' }}></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {groupedCategories.map((group) => (
+                            <React.Fragment key={group.id}>
+                                <tr className={styles.categoryRow}>
+                                    <td colSpan={columns.length + 1}>
+                                        {group.category}
+                                    </td>
+                                </tr>
+                                {group.entries.map((entry, idx) => (
+                                    <tr key={entry.id}>
+                                        {columns.map((column) => (
+                                            <td
+                                                key={column.id}
+                                                style={{
+                                                    width:
+                                                        column.width || 'auto',
+                                                    textAlign:
+                                                        column.type ===
+                                                        'currency'
+                                                            ? 'right'
+                                                            : 'left',
+                                                }}
+                                            >
+                                                {renderScheduledTableField(
+                                                    entry,
+                                                    column,
+                                                    entry.keyCounter
+                                                )}
+                                            </td>
+                                        ))}
+                                        <td>
+                                            {idx > 0 && (
+                                                <ArrowUp
+                                                    size={18}
+                                                    onClick={() =>
+                                                        handleSortChange(
+                                                            group.id,
+                                                            entry.id,
+                                                            'up'
+                                                        )
+                                                    }
+                                                    style={{
+                                                        cursor: 'pointer',
+                                                    }}
+                                                />
+                                            )}
+                                            {idx < group.entries.length - 1 && (
+                                                <ArrowDown
+                                                    size={18}
+                                                    onClick={() =>
+                                                        handleSortChange(
+                                                            group.id,
+                                                            entry.id,
+                                                            'down'
+                                                        )
+                                                    }
+                                                    style={{
+                                                        cursor: 'pointer',
+                                                    }}
+                                                />
+                                            )}
+                                            <TrashCan
+                                                size={18}
+                                                onClick={() =>
+                                                    handleDeleteRow(entry)
+                                                }
+                                                style={{ cursor: 'pointer' }}
+                                            />
+                                        </td>
+                                    </tr>
+                                ))}
+                            </React.Fragment>
+                        ))}
+                    </tbody>
+                </table>
+            ) : (
+                <div>No data available.</div>
+            )}
+        </div>
+    );
+};
+
+export default GenericEditableTable;

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

@@ -106,5 +106,9 @@
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
+
+        p {
+            font-size: 0.85rem;
+        }
     }
 }

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

@@ -233,6 +233,10 @@
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
+
+        p {
+            font-size: 0.85rem;
+        }
     }
 }
 

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

@@ -277,6 +277,10 @@
     border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
 }
 
+.formItem textarea {
+    line-height: 1.65 !important;
+}
+
 input[type='file'] {
     background: var(--item-color) !important;
     border-radius: var (--br) !important;

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

@@ -0,0 +1,136 @@
+.schedulingTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1em 0;
+
+    th,
+    td {
+        padding: 0.75rem;
+        text-align: left;
+        border: 1px solid rgba(var(--primary-rgb), 0.1);
+    }
+
+    th {
+        background-color: var(--secondary-color);
+        color: var(--item-color);
+        font-weight: bold;
+    }
+
+    td {
+        background-color: rgba(var(--primary-rgb), 0.05);
+    }
+}
+
+.categoryRow {
+    background-color: rgba(var(--primary-rgb), 0.1);
+    text-align: left;
+    font-weight: bold;
+    font-size: 1.2rem;
+    color: var(--primary-color);
+}
+
+.totalRow {
+    background-color: rgba(var(--primary-rgb), 0.05);
+    font-weight: bold;
+    text-align: right;
+}
+
+.noDataMessage {
+    text-align: center;
+    color: var(--secondary-color);
+    font-size: 1.125em;
+    padding: 1.5em;
+    margin: 2em auto;
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    max-width: 600px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    font-style: italic;
+}
+
+.polActions {
+    position: fixed;
+    bottom: 15px;
+    right: 20px;
+    width: auto;
+
+    button {
+        display: block;
+        padding: 0.35em 1em;
+        margin: 0 0.15em;
+    }
+}
+
+.gridtxt {
+    &__header {
+        width: 100%;
+        display: block;
+        background: rgba(var(--primary-rgb), 0.05);
+        box-sizing: border-box;
+        padding: 10px 20px;
+        border-radius: var(--br);
+        margin-bottom: 0;
+        font-weight: 700;
+        text-align: center;
+        color: var(--paragraph-color);
+
+        span {
+            font-weight: 700;
+        }
+    }
+
+    > ul {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0.85rem;
+        margin: 0;
+
+        li {
+            flex: 0 0 calc(50% - 10px);
+            padding: 0.65rem;
+            border: 1px solid rgba(var(--primary-rgb), 0.095);
+            color: var(--paragraph-color);
+            background: rgba(var(--primary-rgb), 0.015);
+            margin: 3px;
+            border-radius: var(--br);
+            line-height: 1.45;
+            font-size: 0.85rem;
+
+            &.fw-grid-item {
+                flex: 0 0 calc(100% - 10px);
+            }
+
+            &.notecolor {
+                border: 1px solid var(--secondary-color);
+            }
+        }
+    }
+}
+
+.btn {
+    width: max-content;
+    display: inline-block;
+    position: relative;
+    padding: 0.65rem 1rem;
+    cursor: pointer;
+    font-size: 1rem;
+    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;
+    font-size: 1.25em;
+}
+
+.btn:hover {
+    color: var(--primary-color);
+    background: var(--highlight-color);
+    border: 1px solid rgba(var(--highlight-rgb), 1.05);
+}

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

@@ -270,6 +270,10 @@
     border: 1px solid rgba(var(--primary-color-rgb), 0.85);
 }
 
+.formItem textarea {
+    line-height: 1.65 !important;
+}
+
 input[type='file'] {
     background: var(--item-color) !important;
     border-radius: var (--br) !important;

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

@@ -144,7 +144,7 @@ select:not(:placeholder-shown) + .fi__span {
     background: var(--tertiary-color) !important;
     font-weight: 400 !important;
     transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
-    z-index: 999 !important;
+    z-index: 1 !important;
     color: rgba(var(--paragraph-rgb), 0.65) !important;
 }
 
@@ -221,6 +221,10 @@ select:not(:placeholder-shown) + .fi__span {
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
 }
 
+.formItem textarea {
+    line-height: 1.65 !important;
+}
+
 input[type='file'] {
     background: white !important;
     border-radius: var(--br) !important;

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

@@ -92,13 +92,13 @@
             &.active a,
             &:hover span,
             &.active span {
-                background: rgba(var(--secondary-rgb), 1);
-                color: var(--tertiary-color);
+                background: rgba(var(--nav-active-rgb), 1);
+                color: var(--highlight-color);
             }
 
             &:hover svg,
             &.active svg {
-                color: var(--tertiary-color);
+                color: var(--highlight-color);
             }
 
             > ul {

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

@@ -69,6 +69,10 @@
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
+
+        p {
+            font-size: 0.85rem;
+        }
     }
 }
 

package/src/components/styles/global.css

@@ -10,7 +10,9 @@
 
 html,
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
     height: 100%;
     text-rendering: geometricPrecision;
     font-stretch: 75% 125%;
@@ -19,7 +21,9 @@ body {
 body {
     background: var(--bg-color);
     font-weight: var(--para-weight);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol';
     font-style: normal;
     overflow-x: hidden;
     overscroll-behavior: none;
@@ -113,6 +117,11 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     padding: 0 !important;
 }
 
+.popup-overlay {
+    background: rgba(0, 0, 0, 0.65) !important;
+    backdrop-filter: blur(3px);
+}
+
 .AutocompletePlace-results {
     z-index: 999;
     width: 500px;
@@ -191,4 +200,4 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
 
 .visns-select__menu {
     z-index: 999 !important;
-}
+}