@visns-studio/visns-components 5.6.9 → 5.6.11

package/README.md

@@ -191,12 +191,28 @@ A powerful data table component with sorting, filtering, and pagination.
         params: {},
     }}
     columns={[
-        { field: 'id', headerName: 'ID', width: 90 },
-        { field: 'name', headerName: 'Name', width: 150 },
+        { name: 'id', headerName: 'ID', width: 90 },
+        { name: 'name', headerName: 'Name', width: 150 },
+        {
+            name: 'department',
+            headerName: 'Department',
+            width: 180,
+            groupSummaryReducer: 'count',
+            groupSummaryRenderer: (count) => `${count} employees`,
+        },
+        {
+            name: 'salary',
+            headerName: 'Salary',
+            width: 120,
+            type: 'number',
+            groupSummaryReducer: 'sum',
+            groupSummaryRenderer: (sum) => `$${sum.toLocaleString()}`,
+        },
         // More columns...
     ]}
     form={formConfig}
     gridHeight={500}
+    defaultGroupBy={[{ name: 'department' }]}
     settings={{
         pagination: true,
         pageSize: 25,
@@ -214,16 +230,26 @@ A powerful data table component with sorting, filtering, and pagination.
 
 #### DataGrid Props
 
-| Prop          | Description                        | Type     | Default |
-| ------------- | ---------------------------------- | -------- | ------- |
-| ajaxSetting   | Configuration for data fetching    | Object   | -       |
-| columns       | Column definitions                 | Array    | -       |
-| form          | Form configuration for editing     | Object   | -       |
-| gridHeight    | Height of the grid                 | Number   | 500     |
-| settings      | Grid settings (pagination, etc.)   | Object   | -       |
-| setFilterData | Callback for filter changes        | Function | -       |
-| setConfig     | Callback for configuration changes | Function | -       |
-| style         | Custom styles                      | Object   | -       |
+| Prop                  | Description                                | Type     | Default |
+| --------------------- | ------------------------------------------ | -------- | ------- |
+| ajaxSetting           | Configuration for data fetching            | Object   | -       |
+| columns               | Column definitions                         | Array    | -       |
+| defaultExpandedNodes  | Initial expanded nodes for TreeGrid        | Object   | -       |
+| defaultGroupBy        | Initial grouping configuration             | Array    | -       |
+| expandedNodes         | Current expanded nodes for TreeGrid        | Object   | -       |
+| form                  | Form configuration for editing             | Object   | -       |
+| gridHeight            | Height of the grid                         | Number   | 500     |
+| groupBy               | Current grouping configuration             | Array    | -       |
+| loadNode              | Function to load TreeGrid nodes on demand  | Function | -       |
+| onExpandedNodesChange | Callback for TreeGrid node expand/collapse | Function | -       |
+| onGroupByChange       | Callback for grouping changes              | Function | -       |
+| renderGroupTitle      | Custom renderer for group headers          | Function | -       |
+| settings              | Grid settings (pagination, etc.)           | Object   | -       |
+| setFilterData         | Callback for filter changes                | Function | -       |
+| setConfig             | Callback for configuration changes         | Function | -       |
+| style                 | Custom styles                              | Object   | -       |
+| treeColumn            | Column name to display TreeGrid hierarchy  | String   | -       |
+| treeNestingSize       | Indentation size for TreeGrid levels       | Number   | 20      |
 
 #### Auto-Refresh Functionality
 
@@ -253,6 +279,444 @@ When auto-refresh is configured:
 -   Setting `autoRefresh: true` uses the default 30-second interval
 -   The component silently refreshes data without showing notifications
 
+#### Group By Functionality
+
+The DataGrid component supports grouping data by one or more columns, allowing you to organize and visualize data in hierarchical structures.
+
+##### Using defaultGroupBy
+
+The `defaultGroupBy` property allows you to specify initial grouping when the DataGrid loads:
+
+```jsx
+<DataGrid
+    // Other props...
+    defaultGroupBy={[
+        { name: 'category' }, // Group by a single column
+    ]}
+/>
+```
+
+For more complex grouping with multiple levels:
+
+```jsx
+<DataGrid
+    // Other props...
+    defaultGroupBy={[
+        { name: 'department' }, // First level grouping
+        { name: 'role' }, // Second level grouping
+    ]}
+/>
+```
+
+##### Dynamic Grouping
+
+You can also control grouping programmatically:
+
+```jsx
+const [groupBy, setGroupBy] = useState([{ name: 'category' }]);
+
+// Later in your component
+<DataGrid
+    // Other props...
+    groupBy={groupBy}
+    onGroupByChange={setGroupBy}
+/>;
+```
+
+##### Server-Side Grouping
+
+For server-side grouping, the DataGrid sends the groupBy information to your API endpoint:
+
+```jsx
+<DataGrid
+    ajaxSetting={{
+        url: '/api/data',
+        method: 'POST',
+        // Other settings...
+    }}
+    defaultGroupBy={[{ name: 'category' }]}
+    // Other props...
+/>
+```
+
+Your server will receive a request with groupBy information:
+
+```json
+{
+    "page": 1,
+    "take": 25,
+    "groupBy": [{ "name": "category" }]
+    // Other parameters...
+}
+```
+
+##### Group Summaries
+
+You can add summary calculations to grouped data:
+
+```jsx
+<DataGrid
+    // Other props...
+    columns={[
+        {
+            name: 'amount',
+            headerName: 'Amount',
+            type: 'number',
+            groupSummaryReducer: 'sum', // Options: 'sum', 'avg', 'min', 'max', 'count'
+            groupSummaryRenderer: (summary) => `Total: $${summary.toFixed(2)}`,
+        },
+        // Other columns...
+    ]}
+    defaultGroupBy={[{ name: 'category' }]}
+/>
+```
+
+##### Customizing Group Rendering
+
+You can customize how groups are displayed:
+
+```jsx
+<DataGrid
+    // Other props...
+    renderGroupTitle={(groupData) => (
+        <div style={{ fontWeight: 'bold', color: 'var(--primary-color)' }}>
+            {groupData.name}: {groupData.value} ({groupData.count} items)
+        </div>
+    )}
+    defaultGroupBy={[{ name: 'category' }]}
+/>
+```
+
+##### Complete Example with Dynamic Grouping
+
+Here's a complete example of a component that uses DataGrid with dynamic grouping controls:
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { DataGrid } from 'visns-components';
+
+const EmployeeDataGrid = () => {
+    // State for grouping
+    const [groupBy, setGroupBy] = useState([]);
+
+    // Sample data for the grid
+    const [employees, setEmployees] = useState([]);
+
+    // Fetch data on component mount
+    useEffect(() => {
+        const fetchEmployees = async () => {
+            try {
+                const response = await fetch('/api/employees');
+                const data = await response.json();
+                setEmployees(data);
+            } catch (error) {
+                console.error('Error fetching employees:', error);
+            }
+        };
+
+        fetchEmployees();
+    }, []);
+
+    // Column definitions
+    const columns = [
+        {
+            name: 'id',
+            headerName: 'ID',
+            width: 80,
+        },
+        {
+            name: 'name',
+            headerName: 'Name',
+            width: 180,
+        },
+        {
+            name: 'department',
+            headerName: 'Department',
+            width: 150,
+            groupSummaryReducer: 'count',
+            groupSummaryRenderer: (count) => `${count} employees`,
+        },
+        {
+            name: 'role',
+            headerName: 'Role',
+            width: 150,
+        },
+        {
+            name: 'salary',
+            headerName: 'Salary',
+            width: 120,
+            type: 'number',
+            groupSummaryReducer: 'sum',
+            groupSummaryRenderer: (sum) => `$${sum.toLocaleString()}`,
+        },
+        {
+            name: 'hireDate',
+            headerName: 'Hire Date',
+            width: 120,
+            type: 'date',
+        },
+    ];
+
+    // Group by options for the dropdown
+    const groupByOptions = [
+        { label: 'No Grouping', value: 'none' },
+        { label: 'Department', value: 'department' },
+        { label: 'Role', value: 'role' },
+        { label: 'Department & Role', value: 'department-role' },
+    ];
+
+    // Handle group by change
+    const handleGroupByChange = (e) => {
+        const value = e.target.value;
+
+        switch (value) {
+            case 'department':
+                setGroupBy([{ name: 'department' }]);
+                break;
+            case 'role':
+                setGroupBy([{ name: 'role' }]);
+                break;
+            case 'department-role':
+                setGroupBy([{ name: 'department' }, { name: 'role' }]);
+                break;
+            default:
+                setGroupBy([]);
+                break;
+        }
+    };
+
+    return (
+        <div>
+            <div style={{ marginBottom: '1rem' }}>
+                <label htmlFor="groupBy">Group By: </label>
+                <select
+                    id="groupBy"
+                    onChange={handleGroupByChange}
+                    style={{ padding: '0.5rem', borderRadius: '4px' }}
+                >
+                    {groupByOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+            </div>
+
+            <DataGrid
+                columns={columns}
+                dataSource={employees}
+                groupBy={groupBy}
+                onGroupByChange={setGroupBy}
+                gridHeight={600}
+                settings={{
+                    pagination: true,
+                    pageSize: 25,
+                }}
+                renderGroupTitle={(groupData) => (
+                    <div
+                        style={{
+                            fontWeight: 'bold',
+                            color: 'var(--primary-color)',
+                            padding: '0.25rem 0',
+                        }}
+                    >
+                        {groupData.name === 'department'
+                            ? 'Department'
+                            : 'Role'}
+                        :<span style={{ marginLeft: '0.5rem' }}>
+                            {groupData.value} ({groupData.count} employees)
+                        </span>
+                    </div>
+                )}
+            />
+        </div>
+    );
+};
+
+export default EmployeeDataGrid;
+```
+
+#### TreeGrid Functionality
+
+The DataGrid component also supports hierarchical data display through its TreeGrid functionality. This allows you to represent parent-child relationships in your data with expandable/collapsible nodes.
+
+##### Basic TreeGrid Configuration
+
+To use the TreeGrid functionality:
+
+```jsx
+<DataGrid
+    // Other props...
+    treeColumn="name" // Specify which column will display the expand/collapse icons
+    dataSource={hierarchicalData} // Data with parent-child relationships
+/>
+```
+
+Your data should have a structure where parent nodes contain child nodes:
+
+```jsx
+const hierarchicalData = [
+    {
+        id: 1,
+        name: 'Parent 1',
+        nodes: [
+            // Child nodes
+            { id: 11, name: 'Child 1.1' },
+            {
+                id: 12,
+                name: 'Child 1.2',
+                nodes: [
+                    // Nested children
+                    { id: 121, name: 'Grandchild 1.2.1' },
+                ],
+            },
+        ],
+    },
+    {
+        id: 2,
+        name: 'Parent 2',
+        nodes: [{ id: 21, name: 'Child 2.1' }],
+    },
+];
+```
+
+##### Controlling Expanded Nodes
+
+You can control which nodes are expanded:
+
+```jsx
+const [expandedNodes, setExpandedNodes] = useState({
+    1: true, // Node with ID 1 is expanded
+    '1/12': true, // Node with path 1/12 is expanded
+});
+
+<DataGrid
+    // Other props...
+    treeColumn="name"
+    dataSource={hierarchicalData}
+    expandedNodes={expandedNodes}
+    onExpandedNodesChange={setExpandedNodes}
+/>;
+```
+
+##### Asynchronous Node Loading
+
+For large datasets, you can load child nodes on demand:
+
+```jsx
+<DataGrid
+    // Other props...
+    treeColumn="name"
+    dataSource={asyncHierarchicalData}
+    loadNode={({ node }) => {
+        // Return a Promise that resolves to the child nodes
+        return fetchChildNodes(node.id);
+    }}
+/>
+```
+
+For asynchronous loading, parent nodes should have `nodes: null` to indicate they have children that need to be loaded.
+
+##### Complete TreeGrid Example
+
+Here's a complete example of a component that uses DataGrid with TreeGrid functionality:
+
+```jsx
+import React, { useState } from 'react';
+import { DataGrid } from 'visns-components';
+
+const OrganizationTreeGrid = () => {
+    // Sample hierarchical data
+    const departments = [
+        {
+            id: 1,
+            name: 'Executive',
+            budget: 1500000,
+            nodes: [
+                {
+                    id: 11,
+                    name: 'Finance',
+                    budget: 850000,
+                    nodes: [
+                        { id: 111, name: 'Accounting', budget: 350000 },
+                        { id: 112, name: 'Investment', budget: 500000 },
+                    ],
+                },
+                {
+                    id: 12,
+                    name: 'Operations',
+                    budget: 650000,
+                    nodes: [
+                        { id: 121, name: 'HR', budget: 200000 },
+                        { id: 122, name: 'Facilities', budget: 450000 },
+                    ],
+                },
+            ],
+        },
+        {
+            id: 2,
+            name: 'Sales & Marketing',
+            budget: 1200000,
+            nodes: [
+                { id: 21, name: 'Sales', budget: 700000 },
+                { id: 22, name: 'Marketing', budget: 500000 },
+            ],
+        },
+        {
+            id: 3,
+            name: 'Technology',
+            budget: 2000000,
+            nodes: [
+                { id: 31, name: 'Development', budget: 1200000 },
+                { id: 32, name: 'IT Support', budget: 800000 },
+            ],
+        },
+    ];
+
+    // State for expanded nodes
+    const [expandedNodes, setExpandedNodes] = useState({
+        1: true, // Executive department is expanded by default
+        3: true, // Technology department is expanded by default
+    });
+
+    // Column definitions
+    const columns = [
+        {
+            name: 'name',
+            headerName: 'Department',
+            width: 250,
+            // This column will display the tree expand/collapse icons
+        },
+        {
+            name: 'budget',
+            headerName: 'Budget',
+            width: 150,
+            type: 'number',
+            render: ({ value }) => `$${value.toLocaleString()}`,
+        },
+    ];
+
+    return (
+        <div>
+            <h2>Organization Structure</h2>
+
+            <DataGrid
+                columns={columns}
+                dataSource={departments}
+                treeColumn="name"
+                expandedNodes={expandedNodes}
+                onExpandedNodesChange={setExpandedNodes}
+                treeNestingSize={30} // Indentation size for nested levels
+                gridHeight={500}
+                idProperty="id"
+            />
+        </div>
+    );
+};
+
+export default OrganizationTreeGrid;
+```
+
 ### Form Components
 
 #### Form

package/package.json

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

package/src/components/cms/sorting/Item.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { SortableElement, sortableHandle } from 'react-sortable-hoc';
 import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
 
+import styles from './styles/Item.module.scss';
+
 const DragHandle = sortableHandle(() => (
     <ChevronVertical className="drag-handle" strokeWidth={1} size={26} />
 ));
@@ -63,9 +65,9 @@ const SortableItem = ({
 
     const EditButton = () => (
         <Pencil
-            className="delete pencil-edit"
-            strokeWidth={1}
-            size={26}
+            className="pencil-edit"
+            strokeWidth={2}
+            size={24}
             onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -91,22 +93,26 @@ const SortableItem = ({
 
             {renderImage(value)}
 
-            {renderEditButton()}
+            {(handleEdit || handleDelete) && (
+                <div className={styles.actionIcons}>
+                    {renderEditButton()}
 
-            {handleDelete && (
-                <TrashCan
-                    className="delete"
-                    strokeWidth={1}
-                    size={26}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleDelete(
-                            value.id || containerIndex,
-                            value.label || value.file_name
-                        );
-                    }}
-                />
+                    {handleDelete && (
+                        <TrashCan
+                            className="delete"
+                            strokeWidth={2}
+                            size={24}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleDelete(
+                                    value.id || containerIndex,
+                                    value.label || value.file_name
+                                );
+                            }}
+                        />
+                    )}
+                </div>
             )}
         </li>
     );

package/src/components/cms/sorting/List.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import VisnsSortableItem from './Item';
 import { SortableContainer } from 'react-sortable-hoc';
 
+import styles from './styles/List.module.scss';
+
 const SortableList = ({
     handleClick,
     handleDelete,
@@ -10,7 +12,7 @@ const SortableList = ({
     showImage,
 }) => {
     return (
-        <ul className="sortlist">
+        <ul className={styles.sortlist}>
             {items.map((value, index) => (
                 <VisnsSortableItem
                     key={`item-${index}`}

package/src/components/cms/sorting/styles/Item.module.scss

@@ -0,0 +1,38 @@
+.actionIcons {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    z-index: 10;
+}
+
+:global {
+    .delete {
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: #d32f2f;
+        }
+    }
+
+    .pencil-edit {
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: var(--secondary-color);
+        }
+    }
+}

package/src/components/cms/sorting/styles/List.module.scss

@@ -0,0 +1,74 @@
+.sortlist {
+    width: 100%;
+    display: grid;
+    grid-gap: 0.4rem;
+    grid-template-columns: repeat(1, 1fr);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-size: 0.8rem;
+    list-style: none;
+
+    @media (min-width: 576px) {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    @media (min-width: 992px) {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    li {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+        border-radius: 6px;
+        border: 1px solid rgba(var(--primary-rgb), 0.2);
+        box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.1);
+        padding: 0.8rem 5rem 0.8rem 2rem;
+        margin-bottom: 0.5rem;
+        font-size: 0.9rem;
+        font-weight: 500;
+        transition: all 0.2s ease;
+
+        box-sizing: border-box;
+        cursor: pointer;
+        list-style: none;
+        position: relative;
+        color: var(--paragraph-color);
+        user-select: none;
+
+        &:hover {
+            border-color: rgba(var(--primary-rgb), 0.4);
+            box-shadow: 0px 0px 12px rgba(var(--primary-rgb), 0.2);
+            transform: translateY(-1px);
+        }
+
+        > svg:first-child {
+            width: 100%;
+            max-width: 18px;
+            position: absolute;
+            left: 6px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--primary-color);
+        }
+    }
+
+    .sortimg {
+        width: 40px;
+        position: relative;
+        height: 40px;
+        margin-left: auto;
+        border-radius: 4px;
+        overflow: hidden;
+
+        img {
+            display: block;
+            object-fit: cover;
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+}

package/src/components/crm/DataGrid.jsx

@@ -3206,6 +3206,22 @@ const DataGrid = forwardRef(
             };
         }, []);
 
+        // Reset state when ajaxSetting changes (e.g., when navigating to a new page)
+        useEffect(() => {
+            // Reset selected state
+            setSelected({});
+
+            // Reset filter value if needed
+            if (setFilterData) {
+                setFilterData([]);
+            }
+
+            // Force reload of data
+            if (gridRef.current && gridRef.current.paginationProps) {
+                gridRef.current.paginationProps.reload();
+            }
+        }, [ajaxSetting?.url]);
+
         // Auto-refresh effect
         useEffect(() => {
             // Clear any existing timer
@@ -3258,9 +3274,15 @@ const DataGrid = forwardRef(
                 <div className={styles.dataGridContainer}>
                     {limit && limit > 0 ? (
                         <ReactDataGrid
+                            key={`datagrid-${ajaxSetting?.url || ''}-${
+                                ajaxSetting?.groupBy ? 'grouped' : 'ungrouped'
+                            }`}
                             {...tableSetting}
                             columns={gridColumns}
                             dataSource={dataSource}
+                            {...(ajaxSetting && ajaxSetting.groupBy
+                                ? { defaultGroupBy: ajaxSetting.groupBy }
+                                : {})}
                             filterValue={filterValue}
                             limit={limit}
                             enableColumnAutosize={false}

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

@@ -424,7 +424,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
         const sizeClassMap = {
             full: styles.fwBuilderItem,
             half: styles.halfBuilderItem,
-            quarter: styles.qtrBuilderItem,
+            quarter: styles.halfBuilderItem, // Changed to halfBuilderItem to ensure max 2 per row
         };
 
         return `${styles.formBuilderItem} ${
@@ -855,6 +855,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
             <div className={styles.grid}>
                 <div className={styles.grid__subrow}>
                     <div className={styles.grid__subnav}>
+                        <div
+                            className={styles.gridtxt__header}
+                            style={{ marginBottom: '10px' }}
+                        >
+                            <span>Form Fields</span>
+                        </div>
                         {data.detail && data.detail.length > 0 ? (
                             <div className={styles.sortableListContainer}>
                                 <SortableList
@@ -869,7 +875,19 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                     useDragHandle
                                 />
                             </div>
-                        ) : null}
+                        ) : (
+                            <div
+                                style={{
+                                    padding: '10px',
+                                    textAlign: 'center',
+                                    color: 'rgba(var(--paragraph-color-rgb), 0.7)',
+                                    fontSize: '0.9rem',
+                                }}
+                            >
+                                No fields added yet. Click "Add Field" to get
+                                started.
+                            </div>
+                        )}
                     </div>
                     <div className={styles.grid__subcontent}>
                         <div className={styles.formSplit}>
@@ -1165,7 +1183,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
                                                         'description'
                                                     );
                                                 }}
-                                                onInit={(evt, editor) =>
+                                                onInit={(_, editor) =>
                                                     (editorRef.current = editor)
                                                 }
                                                 value={

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

@@ -22,19 +22,19 @@
     &__subrow {
         width: 100%;
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         height: auto;
     }
 
     &__subnav {
-        flex: 1;
+        flex: 0 0 20%;
         background: white;
         border-radius: var(--br);
         box-sizing: border-box;
-        padding: 5px;
-        margin: 8px 0;
+        padding: 8px;
+        margin: 8px 8px 8px 0;
         height: auto;
-        box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+        box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.05);
 
         > ul {
             width: 100%;
@@ -114,7 +114,7 @@
     }
 
     &__subcontent {
-        flex: 0 1 85%;
+        flex: 0 1 80%;
         background: white;
         border-radius: var(--br);
         border: 1px solid var(--border-color);
@@ -138,14 +138,14 @@
         display: block;
         background: var(--border-color);
         box-sizing: border-box;
-        padding: 10px 20px;
-        border-top-left-radius: var(--br);
-        border-top-right-radius: var(--br);
+        padding: 10px 15px;
+        border-radius: var(--br);
         margin-bottom: 0;
-        font-weight: 700;
+        font-weight: 600;
         text-align: center;
         color: var(--paragraph-color);
         position: relative;
+        font-size: 0.95rem;
 
         span {
             font-weight: 700;
@@ -257,7 +257,7 @@ input[type='file']:hover {
 }
 
 .formBuilderItem {
-    width: 25%;
+    width: 50%;
     padding: 0.35em;
     position: relative;
     box-sizing: border-box;
@@ -318,7 +318,7 @@ input[type='file']:hover {
 }
 
 .qtrBuilderItem {
-    flex-basis: 25%;
+    flex-basis: 50%;
 }
 
 .halfBuilderItem {
@@ -871,45 +871,73 @@ select:not(:placeholder-shown) + .fi__span {
 .sortableListContainer {
     max-height: 800px; /* Optional for scrollable content */
     overflow-y: auto;
+    padding: 0.75rem;
+    border-radius: var(--br);
+    background-color: rgba(var(--primary-rgb), 0.02);
 }
 
 .dragitem {
     list-style: none;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
-    border-radius: 5px;
+    border-radius: 6px;
     border: 1px solid rgba(var(--primary-rgb), 0.2);
-    box-shadow: 0px 0px 30px rgba(var(--primary-rgb), 0.1);
-    padding: 1.25rem 1.25rem 1.25rem 2rem;
+    box-shadow: 0px 0px 15px rgba(var(--primary-rgb), 0.15);
+    padding: 0.8rem 5rem 0.8rem 2rem;
     box-sizing: border-box;
     cursor: grab;
     list-style: none;
     color: var(--paragraph-color);
+    font-size: 0.9rem;
+    font-weight: 500;
 
-    svg {
+    > svg:first-child {
         width: 100%;
         max-width: 18px;
         position: absolute;
-        left: 5px;
-        top: 5px;
+        left: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--primary-color);
     }
 
-    .edit {
-        width: 100%;
-        max-width: 18px;
+    .actionIcons {
         position: absolute;
-        left: 5px;
-        top: 30px;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        z-index: 10;
+    }
+
+    .edit {
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: var(--secondary-color);
+        }
     }
 
     .delete {
-        width: 100%;
-        max-width: 18px;
-        position: absolute;
-        left: 5px;
-        top: 60px;
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: #d32f2f;
+        }
     }
 
     .sortimg {

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

@@ -124,28 +124,50 @@
     color: var(--paragraph-color);
     font-size: 0.8rem;
 
-    svg {
+    > svg:first-child {
         width: 100%;
         max-width: 16px;
         position: absolute;
         left: 4px;
-        top: 4px;
+        top: 50%;
+        transform: translateY(-50%);
     }
 
-    .pencil-edit {
-        width: 100%;
-        max-width: 16px;
+    .actionIcons {
         position: absolute;
-        left: 4px;
-        top: 24px;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        z-index: 10;
+    }
+
+    .pencil-edit {
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: var(--secondary-color);
+        }
     }
 
     .trash-delete {
-        width: 100%;
-        max-width: 16px;
-        position: absolute;
-        left: 4px;
-        top: 44px;
+        width: 22px;
+        height: 22px;
+        color: var(--primary-color);
+        transition: color 0.2s ease;
+        cursor: pointer;
+        display: block;
+
+        &:hover {
+            color: #d32f2f;
+        }
     }
 
     .sortimg {

package/src/components/crm/sorting/Item.jsx

@@ -65,9 +65,9 @@ const SortableItem = ({
 
     const EditButton = () => (
         <Pencil
-            className={styles['edit']}
-            strokeWidth={1}
-            size={22}
+            className={styles.edit}
+            strokeWidth={2}
+            size={24}
             onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -93,22 +93,26 @@ const SortableItem = ({
 
             {renderImage(value)}
 
-            {renderEditButton()}
+            {(handleEdit || handleDelete) && (
+                <div className={styles.actionIcons}>
+                    {renderEditButton()}
 
-            {handleDelete && (
-                <TrashCan
-                    className={styles.delete}
-                    strokeWidth={1}
-                    size={22}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleDelete(
-                            value.id || containerIndex,
-                            value.label || value.file_name
-                        );
-                    }}
-                />
+                    {handleDelete && (
+                        <TrashCan
+                            className={styles.delete}
+                            strokeWidth={2}
+                            size={24}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleDelete(
+                                    value.id || containerIndex,
+                                    value.label || value.file_name
+                                );
+                            }}
+                        />
+                    )}
+                </div>
             )}
         </li>
     );

package/src/components/crm/sorting/styles/Item.module.scss

@@ -1,15 +1,36 @@
-.edit {
-    width: 100%;
-    max-width: 16px;
+.actionIcons {
     position: absolute;
-    left: 4px !important;
-    top: 24px !important;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    z-index: 10;
+}
+
+.edit {
+    width: 22px;
+    height: 22px;
+    color: var(--primary-color);
+    transition: color 0.2s ease;
+    cursor: pointer;
+    display: block;
+
+    &:hover {
+        color: var(--secondary-color);
+    }
 }
 
 .delete {
-    width: 100%;
-    max-width: 16px;
-    position: absolute;
-    left: 4px !important;
-    top: 24px !important;
+    width: 22px;
+    height: 22px;
+    color: var(--primary-color);
+    transition: color 0.2s ease;
+    cursor: pointer;
+    display: block;
+
+    &:hover {
+        color: #d32f2f;
+    }
 }

package/src/components/crm/sorting/styles/List.module.scss

@@ -10,22 +10,26 @@
     list-style: none;
 
     @media (min-width: 576px) {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(1, 1fr);
     }
 
     @media (min-width: 992px) {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(1, 1fr);
     }
 
     li {
         display: flex;
-        justify-content: center;
+        justify-content: flex-start;
         align-items: center;
         flex-wrap: wrap;
-        border-radius: 4px;
+        border-radius: 6px;
         border: 1px solid rgba(var(--primary-rgb), 0.2);
         box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.1);
-        padding: 0.6rem 0.6rem 0.6rem 1.5rem;
+        padding: 0.8rem 5rem 0.8rem 2rem;
+        margin-bottom: 0.5rem;
+        font-size: 0.9rem;
+        font-weight: 500;
+        transition: all 0.2s ease;
 
         box-sizing: border-box;
         cursor: pointer;
@@ -34,12 +38,20 @@
         color: var(--paragraph-color);
         user-select: none;
 
-        svg {
+        &:hover {
+            border-color: rgba(var(--primary-rgb), 0.4);
+            box-shadow: 0px 0px 12px rgba(var(--primary-rgb), 0.2);
+            transform: translateY(-1px);
+        }
+
+        > svg:first-child {
             width: 100%;
-            max-width: 16px;
+            max-width: 18px;
             position: absolute;
-            left: 4px;
-            top: 4px;
+            left: 6px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--primary-color);
         }
     }