@visns-studio/visns-components 5.0.0 → 5.0.1-8.1

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

@@ -0,0 +1,407 @@
+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,
+    modalOpen,
+    preloadedOptions,
+}) => {
+    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, categoryKey) => {
+            const categoryType =
+                category[rows.categoryKey.id]?.[rows.categoryKey.label] || null;
+
+            const categoryId = category[rows.categoryKey.id]?.id || null;
+
+            const groupKey = categoryId || 'no_category';
+
+            if (!grouped[groupKey]) {
+                grouped[groupKey] = {
+                    id: categoryId || 'no_category',
+                    category: categoryType || '',
+                    entries: [],
+                };
+            }
+            grouped[groupKey].entries.push({
+                ...category,
+                keyCounter: categoryKey,
+            });
+        });
+
+        Object.values(grouped).forEach((group) => {
+            group.entries.sort((a, b) => a.sort_order - b.sort_order);
+        });
+
+        // Ensure 'no_category' group is at the top
+        const groupedArray = Object.values(grouped);
+        return groupedArray.sort((a, b) =>
+            a.id === 'no_category' ? -1 : b.id === 'no_category' ? 1 : 0
+        );
+    };
+
+    const handleFieldChange = (value, fieldId, keyCounter) => {
+        setLocalData((prev) => {
+            const updatedDetail = [...prev];
+            updatedDetail[keyCounter] = {
+                ...updatedDetail[keyCounter],
+                [fieldId]: value,
+            };
+
+            debouncedUpdate({ [rows.key]: 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({ [rows.key]: reordered });
+                    return reordered;
+                }
+            }
+
+            return updatedDetail;
+        });
+    };
+
+    const handleDeleteRow = (entry) => {
+        confirmAlert({
+            title: 'Confirm to Delete',
+            message: 'Are you sure you want to delete this entry?',
+            buttons: [
+                {
+                    label: 'Yes',
+                    onClick: async () => {
+                        setLocalData((prev) => {
+                            const updatedDetail = prev.filter(
+                                (item) => item.id !== entry.id
+                            );
+                            debouncedUpdate({ [rows.key]: updatedDetail });
+                            return updatedDetail;
+                        });
+                    },
+                },
+                {
+                    label: 'No',
+                },
+            ],
+        });
+    };
+
+    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 'date':
+                return (
+                    <input
+                        type="date"
+                        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>
+                                            <div className={styles.tdactions}>
+                                                {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',
+                                                    }}
+                                                />
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </React.Fragment>
+                        ))}
+                    </tbody>
+                </table>
+            ) : (
+                <div className={styles.noDataMessage}>
+                    No data available. Please check your filters or try
+                    reloading the data.
+                </div>
+            )}
+
+            <div className={styles.polActions}>
+                <button
+                    className={styles.btn}
+                    onClick={() => {
+                        modalOpen('create', 0);
+                    }}
+                >
+                    Add
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default GenericEditableTable;

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

@@ -37,43 +37,6 @@
     box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 5px 20px;
-    margin: 0;
-    background: var(--primary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    h1 {
-        color: var(--background-color);
-        font-weight: 700;
-        font-size: 1.15em;
-        margin: 0;
-        padding: 0.65rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-
-        a {
-            text-decoration: none;
-            color: var(--secondary-color);
-        }
-
-        svg {
-            color: rgba(var(--tertiary-color-rgb), 0.5);
-            position: relative;
-            top: 0;
-            margin: 0 0.5rem;
-            max-width: 15px;
-        }
-    }
-}
-
 .gridtxt__header {
     width: 100%;
     display: block;
@@ -143,5 +106,9 @@
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;
         border-radius: 5px;
+
+        p {
+            font-size: 0.85rem;
+        }
     }
 }

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

@@ -29,57 +29,6 @@
     box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 10px 20px;
-    margin: 0;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-}
-
-.crmtitle h1 {
-    font-weight: 700;
-    font-size: 1.45em;
-    margin: 0;
-    padding: 0.65rem 0;
-}
-
-.crmtitle h1 a {
-    text-decoration: none;
-    color: rgba(var(--secondary-color-rgb), 1.1);
-    font-weight: 300;
-}
-
-.crmtitle h1 svg {
-    color: rgba(var(--primary-color-rgb), 0.25);
-    position: relative;
-    top: 2px;
-    margin: 0 0.25rem;
-}
-
-.crmtitleSimple {
-    border: none;
-    min-height: auto;
-    padding: 0.65rem 1rem;
-    margin-bottom: 0.15rem;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-
-    h1 {
-        font-size: 1.25rem;
-        margin: 0;
-        padding: 0;
-    }
-}
-
 .titleInfo {
     position: absolute;
     right: 2em;