@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

package/dist/components/core/tree/SolidTreeView.tsx

@@ -6,6 +6,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { ChevronLeft, ChevronRight, EllipsisVertical, Pencil, Plus, RefreshCw, Search, Trash2 } from "lucide-react";
 import { showToast } from "../../../redux/features/toastSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { showNavbar, toggleNavbar } from "../../../redux/features/navbarSlice";
@@ -13,16 +14,10 @@ import { useGetSolidViewLayoutQuery } from "../../../redux/api/solidViewApi";
 import qs from "qs";
 import { useSearchParams } from "../../../hooks/useSearchParams";
 import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
-import { Button } from "primereact/button";
 import { permissionExpression } from "../../../helpers/permissions";
 import { SolidCreateButton } from "../common/SolidCreateButton";
-import { Dialog } from "primereact/dialog";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import { AggregationRule, GroupingRule } from "../common/GroupingComponent";
-import { TreeTable } from "primereact/treetable";
-import { Dropdown } from "primereact/dropdown";
-import type { TreeNode } from "primereact/treenode";
-import { Column } from "primereact/column";
 import { SolidListViewColumn } from "../list/SolidListViewColumn";
 import { hasAnyRole } from "../../../helpers/rolesHelper";
 import { useSession } from "../../../hooks/useSession";
@@ -31,21 +26,18 @@ import { SolidListViewConfigure } from "../list/SolidListViewConfigure";
 import CompactImage from '../../../resources/images/layout/images/compact.png';
 import CozyImage from '../../../resources/images/layout/images/cozy.png';
 import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
-import { Divider } from "primereact/divider";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
-import { getSingularAndPlural } from "../../../helpers/helpers";
 import { getFilterObjectFromLocalStorage, setFilterObjectToLocalStorage } from "../list/SolidListView";
-import { HomePageModuleSvg } from "../../Svg/HomePageModuleSvg";
 import { SolidBeforeTreeNodeLoad } from "../../../types";
 import { getExtensionFunction } from "../../../helpers/registry";
 import { SolidTreeLoad, SolidTreeUiEventResponse } from "../../../types/solid-core";
-import { Tooltip } from "primereact/tooltip";
 import { useRouter } from "../../../hooks/useRouter";
 import { normalizeSolidListTreeKanbanActionPath } from "../../../helpers/routePaths";
 import { usePathname } from "../../../hooks/usePathname";
 import { useHandleListCustomButtonClick } from "../../../components/common/useHandleListCustomButtonClick";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { SolidListViewRowButtonContextMenu } from "../list/SolidListViewRowButtonContextMenu";
+import { SolidButton, SolidDialog, SolidDialogBody, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuSeparator, SolidDropdownMenuTrigger, SolidIcon } from "../../shad-cn-ui";
+import { SolidHeaderRequestStatus } from "../../common/SolidHeaderRequestStatus";
+import { Column as SolidTreeColumn, SolidTreeNode as TreeNode, SolidTreeSelectionKeys, SolidTreeTable } from "./SolidTreeTable";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -118,6 +110,10 @@ type PaginationEntry = {
 };
 
 const DEFAULT_PAGE_SIZE = 25;
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+const resolveDefaultPageSize = (options: number[]) => (
+  options.includes(DEFAULT_PAGE_SIZE) ? DEFAULT_PAGE_SIZE : options[0]
+);
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
@@ -149,7 +145,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
   const [aggregationRules, setAggregationRules] = useState<AggregationRule[]>([]);
 
   const [treeNodes, setTreeNodes] = useState<TreeNode[]>([]);
-  const [selectedNodeKeys, setSelectedNodeKeys] = useState<Record<string, any>>({});
+  const [selectedNodeKeys, setSelectedNodeKeys] = useState<SolidTreeSelectionKeys>({});
   const [expandedKeys, setExpandedKeys] = useState<any>({});
   const [treeLoading, setTreeLoading] = useState<boolean>(false);
 
@@ -181,6 +177,8 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
   const [size, setSize] = useState<string | any>(sizeOptions[1].value);
   const [viewModes, setViewModes] = useState<any>([]);
 
+  const headerRequestStatusLabel = treeLoading ? "Loading..." : null;
+
 
   // ── Pagination state ──────────────────────────────────────────────────────
   /**
@@ -189,14 +187,17 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
    */
   const [paginationMap, setPaginationMap] = useState<Record<string, PaginationEntry>>({});
 
-  const getPagination = (key: string): PaginationEntry =>
-    paginationMap[key] ?? { offset: 0, limit: globalLimit, total: 0 };
+  const getPagination = (key: string, map = paginationMap): PaginationEntry =>
+    map[key] ?? { offset: 0, limit: globalLimit, total: 0 };
 
   const setPagination = (key: string, entry: Partial<PaginationEntry>) =>
-    setPaginationMap((prev) => ({
-      ...prev,
-      [key]: { ...getPagination(key), ...entry },
-    }));
+    setPaginationMap((prev) => {
+      const current = getPagination(key, prev);
+      return {
+        ...prev,
+        [key]: { ...current, ...entry },
+      };
+    });
 
   // ── Pagination helpers ────────────────────────────────────────────────────
 
@@ -262,7 +263,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     {
       modelName: params.modelName,
       moduleName: params.moduleName,
-      viewType: "list",
+      viewType: "tree",
       menuItemId,
       menuItemName,
       actionId,
@@ -403,7 +404,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     const layoutPageSizeOptions = solidTreeViewMetaData?.data?.solidView?.layout?.attrs?.pageSizeOptions;
     const currentOptions = (Array.isArray(layoutPageSizeOptions) && layoutPageSizeOptions.length > 0)
       ? layoutPageSizeOptions
-      : [15, 25, 50];
+      : DEFAULT_PAGE_SIZE_OPTIONS;
 
     setPageSizeOptions(currentOptions);
 
@@ -417,14 +418,14 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       if (savedLimit && currentOptions.includes(savedLimit)) {
         setGlobalLimit(savedLimit);
       } else {
-        setGlobalLimit(currentOptions[0]);
+        setGlobalLimit(resolveDefaultPageSize(currentOptions));
       }
     }
     else {
       if (!solidTreeViewLayout || !solidFieldsMetadata) {
         setToPopulate([]);
         setToPopulateMedia([]);
-        setGlobalLimit(currentOptions[0]);
+        setGlobalLimit(resolveDefaultPageSize(currentOptions));
         return;
       }
 
@@ -445,7 +446,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
       setToPopulate(nextPopulate);
       setToPopulateMedia(nextPopulateMedia);
-      setGlobalLimit(currentOptions[0]);
+      setGlobalLimit(resolveDefaultPageSize(currentOptions));
     }
   }, [solidTreeViewLayout, solidTreeViewMetaData]);
 
@@ -889,9 +890,10 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       const rootNodes = buildGroupNodes(response?.groupMeta || [], 0, [], "root");
       setTreeNodes(rootNodes);
       setExpandedKeys({});
+      setSelectedNodeKeys({});
       // Collapse expanded keys since data changed
       const total = response?.meta.totalRecords ?? 0;
-      setPagination("root", { offset, total: total });
+      setPagination("root", { offset, total: total, limit });
 
       if (latestFilterPredicatesRef.current && latestFilterPredicatesRef.current.persistFilter) {
         let queryData: any = {
@@ -936,7 +938,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     if (!meta || meta.nodeType !== "group") return;
 
     const nodeKey = String(node.key);
-    const limit = getPagination(nodeKey).limit || DEFAULT_PAGE_SIZE;
+    const limit = getPagination(nodeKey).limit || globalLimit || DEFAULT_PAGE_SIZE;
     const nextRuleIndex = meta.ruleIndex + 1;
 
     setTreeLoading(true);
@@ -966,7 +968,28 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       }
 
       setTreeNodes((prev) => updateNodeChildren(prev, nodeKey, children));
-      setPagination(nodeKey, { offset, total });
+      setPagination(node.key as string, { offset, total: total, limit });
+      setSelectedNodeKeys((prevKeys) => {
+        const next = { ...prevKeys };
+        Object.keys(next).forEach((key) => {
+          if (key !== nodeKey && key.startsWith(`${nodeKey}-`)) {
+            delete next[key];
+          }
+        });
+
+        if (prevKeys?.[nodeKey]?.checked) {
+          children.forEach((child) => {
+            next[String(child.key)] = {
+              ...next[String(child.key)],
+              checked: true,
+              partialChecked: false,
+              nodeType: child.data?.__treeMeta?.nodeType,
+            };
+          });
+        }
+
+        return next;
+      });
 
       // Collapse all immediate children's expanded state so stale
       // sub-trees don't appear open with no data after pagination.
@@ -1082,6 +1105,29 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     await loadNodeChildren(node, nextOffset);
   };
 
+  useEffect(() => {
+    const checkedRecords: any[] = [];
+
+    const walk = (nodes: TreeNode[]) => {
+      nodes.forEach((node) => {
+        const key = String(node.key);
+        const nodeMeta = (node.data as TreeRowData)?.__treeMeta;
+
+        if (selectedNodeKeys?.[key]?.checked && nodeMeta?.nodeType === "record") {
+          checkedRecords.push(node.data);
+        }
+
+        if (node.children?.length) {
+          walk(node.children);
+        }
+      });
+    };
+
+    walk(treeNodes);
+    setSelectedRecords(checkedRecords);
+    setSelectedRecoverRecords(checkedRecords);
+  }, [treeNodes, selectedNodeKeys]);
+
   // ─── Filter handler ───────────────────────────────────────────────────────
 
   const handleApplyCustomFilter = (nextFilterPredicates: any, persistFilter = false) => {
@@ -1183,11 +1229,11 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       };
 
       return (
-        <Column
+        <SolidTreeColumn
           key={`tree-col-${fieldMetadata.name}`}
           field={originalProps.field ?? fieldMetadata.name}
           header={originalProps.header}
-          // sortable
+          sortable={originalProps.sortable}
           style={mergedColumnStyle}
           className={originalProps.className}
           headerClassName={originalProps.headerClassName}
@@ -1219,15 +1265,29 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     return derivedAggregates.map((agg) => {
       const [field, operator] = agg.split(":");
       const responseKey = `${field}_${operator}`;
-      const header = formatHeader(responseKey);
+      const fieldMeta = getFieldMetadata(field);
+      const fieldLabel = fieldMeta?.displayName ?? formatHeader(field);
+      const operatorLabel = operator.toUpperCase();
+      const fullHeader = `${fieldLabel} ${operatorLabel}`;
 
       return (
-        <Column
+        <SolidTreeColumn
           key={`agg-col-${agg}`}
           field={responseKey}
-          header={header}
+          header={(
+            <div className="solid-tree-aggregate-header" title={fullHeader}>
+              <span className="solid-tree-aggregate-header-field">{fieldLabel}</span>
+              <span className="solid-tree-aggregate-header-op">{operatorLabel}</span>
+            </div>
+          )}
           sortable
-          style={{ minWidth: "8rem" }}
+          frozen
+          alignFrozen="right"
+          align="right"
+          alignHeader="right"
+          style={{ width: "7rem", minWidth: "7rem", maxWidth: "7rem" }}
+          headerClassName="solid-tree-aggregate-header-cell"
+          bodyClassName="solid-tree-aggregate-body-cell"
           body={(node: any) => {
             const rowData = node?.data ?? node;
             const nodeMeta = rowData?.__treeMeta;
@@ -1235,7 +1295,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
             if (nodeMeta?.nodeType !== "group") return <span>&nbsp;</span>;
 
             const value = nodeMeta?.aggregates?.[responseKey];
-            return <span>{value ?? 0}</span>;
+            return <span className="solid-tree-aggregate-value">{value ?? 0}</span>;
           }}
         />
       );
@@ -1251,24 +1311,9 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
     if (nodeMeta?.nodeType !== "group") return <span>&nbsp;</span>;
 
     const label = nodeMeta.groupLabel ?? "";
-    const truncateAfter = 30;
     return (
-      <div className="flex align-items-center">
-        <div
-          className="solid-table-row"
-          style={{ maxWidth: `${truncateAfter}ch` }}
-        // title={truncateAfter ? displayValue : undefined}
-        >
-          <span className="font-semibold">{label}</span>
-        </div>
-        {truncateAfter && label.length > truncateAfter &&
-          <>
-            <Tooltip target=".solid-field-tooltip-icon" />
-            <i className="pi pi-info-circle solid-field-tooltip-icon"
-              data-pr-tooltip={label}
-            />
-          </>
-        }
+      <div className="solid-tree-group-label">
+        <span className="font-semibold solid-tree-group-label-text">{label}</span>
       </div>
     );
   };
@@ -1278,57 +1323,55 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
   const RootPaginationBar = () => {
     if (activeGroupingRules.length === 0) return null;
 
-    const { offset, total } = getPagination("root");
-    const currentPage = Math.floor(offset / globalLimit) + 1;
+    const { offset, limit, total } = getPagination("root");
     const rootHasPrev = hasPrev("root");
     const rootHasNext = hasNext("root");
-
-    // if (!rootHasPrev && !rootHasNext) return null;
+    const start = total === 0 ? 0 : offset + 1;
+    const end = total === 0 ? 0 : Math.min(offset + limit, total);
 
     return (
-      <div style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--surface-border)" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem" }}>
-          <span className="text-sm text-color-secondary">Items per page</span>
-          <Dropdown
-            value={globalLimit}
-            options={pageSizeOptions}
-            onChange={(e) => {
-              setGlobalLimit(e.value);
+      <div className="w-full solid-table-paginator solid-table-paginator-align-end flex items-center justify-end gap-3 text-sm rounded-md border border-border/60 px-3 py-1.5 bg-background">
+        <div className="solid-paginator-meta flex items-center gap-2 ml-auto">
+          <span className="solid-paginator-label">Rows</span>
+          <select
+            value={limit}
+            onChange={(event) => {
+              setGlobalLimit(Number(event.target.value));
             }}
-            className="solid-page-size-dropdown"
-            style={{ height: '2rem', display: 'flex', alignItems: 'center' }}
-          />
+            className="solid-paginator-select"
+          >
+            {pageSizeOptions.map((option) => (
+              <option key={option} value={option}>{option}</option>
+            ))}
+          </select>
+          <span className="solid-paginator-report">{start} - {end} of {total}</span>
         </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem 0.75rem" }}>
-          <span className="text-sm text-color-secondary">{offset + 1}–{Math.min(offset + globalLimit, total)} of {total}</span>
-          <Button
+        <div className="solid-paginator-actions flex items-center gap-2">
+          <button
             type="button"
-            icon="pi pi-angle-left"
-            size="small"
-            outlined
-            severity="secondary"
+            className="solid-paginator-btn"
+            onClick={() => { void handleRootPageChange("prev"); }}
             disabled={!rootHasPrev || treeLoading}
-            onClick={() => handleRootPageChange("prev")}
-            style={{ padding: 0, border: "none", width: "2rem" }}
-            className="small-button"
-          />
-          <Button
+          >
+            Previous
+          </button>
+          <button
             type="button"
-            icon="pi pi-angle-right"
-            iconPos="right"
-            size="small"
-            outlined
-            severity="secondary"
+            className="solid-paginator-btn"
+            onClick={() => { void handleRootPageChange("next"); }}
             disabled={!rootHasNext || treeLoading}
-            onClick={() => handleRootPageChange("next")}
-            style={{ padding: 0, border: "none", width: "2rem" }}
-            className="small-button"
-          />
+          >
+            Next
+          </button>
         </div>
       </div>
     );
   };
 
+  const openGroupingBuilder = () => {
+    solidGlobalSearchElementRef.current?.openGroupingDialog?.();
+  };
+
   // ─── Imperative handle ────────────────────────────────────────────────────
 
   useImperativeHandle(ref, () => ({
@@ -1338,7 +1381,15 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
       solidGlobalSearchElementRef.current?.clearFilter?.();
     },
     applyFilter: (filter) => { handleApplyCustomFilter(filter); },
-    setPagination: () => { /* pagination wired via paginationMap */ },
+    setPagination: (nextFirst: number, nextRows: number) => {
+      const currentLimit = getPagination("root").limit;
+      if (nextRows !== currentLimit) {
+        setGlobalLimit(nextRows);
+        void loadRootGroups(0);
+        return;
+      }
+      void loadRootGroups(nextFirst);
+    },
     setSort: (nextSortField: string, nextSortOrder: 1 | -1 | 0) => {
       setSortField(nextSortField);
       setSortOrder(nextSortOrder);
@@ -1361,67 +1412,45 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
 
   const handleCustomButtonClick = useHandleListCustomButtonClick();
 
-
-
   const [selectedSolidViewData, setSelectedSolidViewData] = useState<any>();
-  const selectedDataRef = useRef<any>();
-  const op = useRef<any>(null);
   const [deleteEntity, setDeleteEntity] = useState(false);
+  const openRowForEdit = (rowData: any, viewMode: "edit" | "view") => {
+    try {
+      sessionStorage.setItem("fromView", "tree");
+      sessionStorage.setItem("fromViewUrl", window.location.pathname + window.location.search);
+    } catch (e) { }
 
-  const hasEditInContextMenu = actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) &&
-    solidTreeViewLayout?.attrs?.edit !== false &&
-    solidTreeViewLayout?.attrs?.showDefaultEditButton !== false &&
-    solidTreeViewLayout?.attrs?.showRowEditInContextMenu !== false &&
-    !(isDraftPublishWorkflowEnabled && selectedDataRef.current?.publishedAt);
-
-  const hasDeleteInContextMenu = actionsAllowed.includes(`${permissionExpression(params.modelName, 'delete')}`) &&
-    solidTreeViewLayout?.attrs?.delete !== false &&
-    solidTreeViewLayout?.attrs?.showRowDeleteInContextMenu !== false &&
-    !(isDraftPublishWorkflowEnabled && selectedDataRef.current?.publishedAt);
-
-  const hasCustomContextMenuButtons =
-    solidTreeViewLayout?.attrs?.rowButtons?.some(
-      (rb: any) => rb?.attrs?.actionInContextMenu === true
+    router.push(
+      `${editBaseUrl}/${rowData?.id}?viewMode=${viewMode}&${new URLSearchParams(editActionQueryParams).toString()}`
     );
+  };
 
-  const hasAnyContextMenuActions =
-    hasEditInContextMenu || hasDeleteInContextMenu || hasCustomContextMenuButtons;
-
+  const canEditRow = (rowData: any, inContextMenu = false) =>
+    actionsAllowed.includes(permissionExpression(params.modelName, "update")) &&
+    solidTreeViewLayout?.attrs?.edit !== false &&
+    (!inContextMenu || solidTreeViewLayout?.attrs?.showDefaultEditButton !== false) &&
+    (!inContextMenu || solidTreeViewLayout?.attrs?.showRowEditInContextMenu !== false) &&
+    !(isDraftPublishWorkflowEnabled && rowData?.publishedAt);
 
-  const detailsBodyTemplate = (solidViewData: any) => {
-    return (
-      <div>
-        <Button
-          type="button"
-          text
-          size="small"
-          className=""
-          onClick={(e) =>
-          // @ts-ignore
-          {
-            e.stopPropagation();
-            selectedDataRef.current = solidViewData;
-            setSelectedSolidViewData(solidViewData);
-            op.current?.toggle(e)
-          }
-          }
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="3"
-            height="10"
-            viewBox="0 0 4 16"
-            fill="none"
-          >
-            <path
-              d="M4 14C4 14.55 3.80417 15.0208 3.4125 15.4125C3.02083 15.8042 2.55 16 2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14C0 13.45 0.195833 12.9792 0.5875 12.5875C0.979167 12.1958 1.45 12 2 12C2.55 12 3.02083 12.1958 3.4125 12.5875C3.80417 12.9792 4 13.45 4 14ZM4 8C4 8.55 3.80417 9.02083 3.4125 9.4125C3.02083 9.80417 2.55 10 2 10C1.45 10 0.979167 9.80417 0.5875 9.4125C0.195833 9.02083 0 8.55 0 8C0 7.45 0.195833 6.97917 0.5875 6.5875C0.979167 6.19583 1.45 6 2 6C2.55 6 3.02083 6.19583 3.4125 6.5875C3.80417 6.97917 4 7.45 4 8ZM4 2C4 2.55 3.80417 3.02083 3.4125 3.4125C3.02083 3.80417 2.55 4 2 4C1.45 4 0.979167 3.80417 0.5875 3.4125C0.195833 3.02083 0 2.55 0 2C0 1.45 0.195833 0.979166 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979166 4 1.45 4 2Z"
-              fill="#666666"
-            />
-          </svg>
-        </Button>
-      </div>
-    );
-  };
+  const canDeleteRow = (rowData: any, inContextMenu = false) =>
+    actionsAllowed.includes(permissionExpression(params.modelName, "delete")) &&
+    solidTreeViewLayout?.attrs?.delete !== false &&
+    (!inContextMenu
+      ? params.embeded ||
+      (solidTreeViewLayout?.attrs?.showRowDeleteInContextMenu !== undefined &&
+        solidTreeViewLayout?.attrs?.showRowDeleteInContextMenu !== true)
+      : solidTreeViewLayout?.attrs?.showRowDeleteInContextMenu !== false) &&
+    !(isDraftPublishWorkflowEnabled && rowData?.publishedAt);
+
+  const getContextMenuButtons = (rowData: any) =>
+    (solidTreeViewLayout?.attrs?.rowButtons || []).filter((rb: any) => {
+      const roles = rb?.attrs?.roles || [];
+      return (
+        rb?.attrs?.actionInContextMenu === true &&
+        rb?.attrs?.visible !== false &&
+        (roles.length === 0 || hasAnyRole(user?.roles, roles))
+      );
+    });
 
 
   const handleDeleteEntity = async () => {
@@ -1444,8 +1473,14 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
   };
 
   const renderRowActions = (rowData: any) => {
+    const customContextMenuButtons = getContextMenuButtons(rowData);
+    const hasAnyContextMenuActions =
+      canEditRow(rowData, true) ||
+      canDeleteRow(rowData, true) ||
+      customContextMenuButtons.length > 0;
+
     return (
-      <div className="flex align-items-center justify-content-end gap-1">
+      <div className="flex align-items-center justify-content-end gap-1" onClick={(event) => event.stopPropagation()}>
 
         {/* ---------------- CUSTOM ROW BUTTONS ---------------- */}
         {solidTreeViewLayout?.attrs?.rowButtons &&
@@ -1462,7 +1497,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
               return !isInContextMenu && isAllowed && isVisible;
             })
             .map((button: any, index: number) => (
-              <Button
+              <SolidButton
                 key={index}
                 type="button"
                 icon={button?.attrs?.icon ?? "pi pi-pencil"}
@@ -1472,7 +1507,7 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
                     ? button.attrs.label
                     : ""
                 }
-                size="small"
+                size="sm"
                 iconPos="left"
                 onClick={() => {
                   const event = {
@@ -1491,30 +1526,12 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
         ) &&
           solidTreeViewLayout?.attrs?.edit !== false &&
           solidTreeViewLayout?.attrs?.showRowEditInContextMenu === false && (
-            <Button
-              text
-              severity="secondary"
-              size="small"
-              icon="pi pi-pencil"
-              onClick={() => {
-                // if (params.embeded == true) {
-                //   params.handleEditClickForEmbeddedView(rowData?.id);
-                // } else {
-                try {
-                  sessionStorage.setItem("fromView", "list");
-                  sessionStorage.setItem(
-                    "fromViewUrl",
-                    window.location.pathname + window.location.search
-                  );
-                } catch (e) { }
-
-                router.push(
-                  `${editBaseUrl}/${rowData?.id}?viewMode=edit&${new URLSearchParams(
-                    editActionQueryParams
-                  ).toString()}`
-                );
-                // }
-              }}
+            <SolidButton
+              variant="ghost"
+              size="sm"
+              leftIcon={<Pencil size={14} />}
+              className="solid-tree-row-action-icon"
+              onClick={() => openRowForEdit(rowData, "edit")}
             />
           )}
 
@@ -1528,26 +1545,73 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
               undefined &&
               solidTreeViewLayout?.attrs?.showRowDeleteInContextMenu !==
               true)) && (
-            <Button
-              text
-              size="small"
-              severity="danger"
-              icon="pi pi-trash"
+            <SolidButton
+              variant="ghost"
+              size="sm"
+              leftIcon={<Trash2 size={14} />}
+              className="solid-tree-row-action-icon is-danger"
               onClick={() => {
-                // if (
-                //   params?.embededFieldRelationType === "many-to-many"
-                // ) {
-                //   params?.handleDeleteClick(rowData.id);
-                // } else {
                 setSelectedSolidViewData(rowData);
                 setDeleteEntity(true);
-                // }
               }}
             />
           )}
 
         {/* ---------------- CONTEXT MENU ---------------- */}
-        {hasAnyContextMenuActions && detailsBodyTemplate(rowData)}
+        {hasAnyContextMenuActions && (
+          <SolidDropdownMenu>
+            <SolidDropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="solid-tree-row-menu-trigger"
+                aria-label="Open row actions"
+                data-no-row-click="true"
+              >
+                <EllipsisVertical size={16} />
+              </button>
+            </SolidDropdownMenuTrigger>
+            <SolidDropdownMenuContent className="solid-tree-row-menu">
+              {canEditRow(rowData, true) ? (
+                <SolidDropdownMenuItem onSelect={() => openRowForEdit(rowData, "edit")}>
+                  <Pencil size={14} />
+                  <span>Edit</span>
+                </SolidDropdownMenuItem>
+              ) : null}
+              {canDeleteRow(rowData, true) && !params.embeded ? (
+                <SolidDropdownMenuItem
+                  className="is-danger"
+                  onSelect={() => {
+                    setSelectedSolidViewData(rowData);
+                    setDeleteEntity(true);
+                  }}
+                >
+                  <Trash2 size={14} />
+                  <span>Delete</span>
+                </SolidDropdownMenuItem>
+              ) : null}
+              {customContextMenuButtons.length > 0 &&
+                (canEditRow(rowData, true) || (canDeleteRow(rowData, true) && !params.embeded)) ? (
+                <SolidDropdownMenuSeparator />
+              ) : null}
+              {customContextMenuButtons.map((button: any, index: number) => (
+                <SolidDropdownMenuItem
+                  key={`${rowData?.id || "row"}-${button?.attrs?.label || index}`}
+                  onSelect={() => {
+                    const event = {
+                      params,
+                      rowData,
+                      solidListViewMetaData: solidTreeViewMetaData?.data,
+                    };
+                    handleCustomButtonClick(button.attrs, event);
+                  }}
+                >
+                  {button?.attrs?.icon ? <i className={button.attrs.icon} aria-hidden="true" /> : <Pencil size={14} />}
+                  <span>{button?.attrs?.label}</span>
+                </SolidDropdownMenuItem>
+              ))}
+            </SolidDropdownMenuContent>
+          </SolidDropdownMenu>
+        )}
       </div>
     );
   };
@@ -1555,473 +1619,390 @@ export const SolidTreeView = forwardRef<SolidTreeViewHandle, SolidTreeViewParams
   // ─── Render ───────────────────────────────────────────────────────────────
 
   return (
-    <div className="page-parent-wrapper">
-      {/* ── Header ── */}
-      <div className="page-header flex-column lg:flex-row">
-        <div className="flex justify-content-between w-full">
-          <div className="flex align-items-center solid-header-buttons-wrapper">
-            {params.embeded !== true && (
-              <div className="apps-icon block md:hidden cursor-pointer" onClick={toggleBothSidebars}>
-                <i className="pi pi-th-large"></i>
+    <div className="page-parent-wrapper solid-list-page-wrapper solid-tree-page-wrapper flex h-full min-h-0 overflow-hidden">
+      <div className="solid-list-content h-full flex flex-column flex-grow-1">
+        <div className="solid-list-surface solid-tree-surface flex flex-column flex-1 min-h-0">
+          {/* ── Header ── */}
+          <div className="page-header solid-list-toolbar solid-tree-toolbar flex-column lg:flex-row">
+            <div className="flex justify-content-between w-full solid-list-toolbar-row">
+              <div className="flex gap-3 align-items-center w-full solid-list-toolbar-left">
+                <div className="flex align-items-center gap-2">
+                  {params.embeded !== true && (
+                    <div className="apps-icon block md:hidden cursor-pointer" onClick={toggleBothSidebars}>
+                      <SolidIcon name="si-th-large" />
+                    </div>
+                  )}
+                  <p className="m-0 view-title solid-text-wrapper">{treeViewTitle}</p>
+                </div>
+
+                {solidTreeViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true && (
+                  <div className="hidden lg:flex">
+                    <SolidGlobalSearchElement
+                      viewType="tree"
+                      showSaveFilterPopup={showSaveFilterPopup}
+                      setShowSaveFilterPopup={setShowSaveFilterPopup}
+                      ref={solidGlobalSearchElementRef}
+                      viewData={solidTreeViewMetaData}
+                      handleApplyCustomFilter={handleApplyCustomFilter}
+                    />
+                  </div>
+                )}
               </div>
-            )}
 
-            <p className="m-0 view-title solid-text-wrapper">{treeViewTitle}</p>
-
-            {solidTreeViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true && (
-              <div className="hidden lg:flex">
-                <SolidGlobalSearchElement
-                  viewType="tree"
-                  showSaveFilterPopup={showSaveFilterPopup}
-                  setShowSaveFilterPopup={setShowSaveFilterPopup}
-                  ref={solidGlobalSearchElementRef}
-                  viewData={solidTreeViewMetaData}
-                  handleApplyCustomFilter={handleApplyCustomFilter}
-                />
-              </div>
-            )}
-          </div>
+              <div className="flex align-items-center solid-header-buttons-wrapper solid-list-toolbar-actions">
+                {headerRequestStatusLabel ? <SolidHeaderRequestStatus label={headerRequestStatusLabel} /> : null}
 
-          <div className="flex align-items-center solid-header-buttons-wrapper">
-            {solidTreeViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true && (
-              <div className="flex lg:hidden">
-                <Button
-                  type="button"
-                  size="small"
-                  icon="pi pi-search"
-                  severity="secondary"
-                  outlined
-                  className="solid-icon-button"
-                  onClick={() => setShowGlobalSearchElement(!showGlobalSearchElement)}
-                />
-              </div>
-            )}
+                {solidTreeViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true && (
+                  <div className="flex lg:hidden">
+                    <SolidButton
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      leftIcon={<Search size={14} />}
+                      className="solid-icon-button"
+                      onClick={() => setShowGlobalSearchElement(!showGlobalSearchElement)}
+                    />
+                  </div>
+                )}
+
+                {actionsAllowed.includes(`${permissionExpression(params.modelName, "create")}`) &&
+                  solidTreeViewMetaData?.data?.solidView?.layout?.attrs.create !== false && (
+                    <SolidCreateButton
+                      createButtonUrl={createButtonUrl}
+                      createActionQueryParams={createActionQueryParams}
+                      responsiveIconOnly={true}
+                    />
+                  )}
 
-            {actionsAllowed.includes(`${permissionExpression(params.modelName, "create")}`) &&
-              solidTreeViewMetaData?.data?.solidView?.layout?.attrs.create !== false && (
-                <SolidCreateButton
-                  createButtonUrl={createButtonUrl}
-                  createActionQueryParams={createActionQueryParams}
-                  responsiveIconOnly={true}
-                />
-              )}
+                {actionsAllowed.includes(`${permissionExpression(params.modelName, "delete")}`) &&
+                  solidTreeViewMetaData?.data?.solidView?.layout?.attrs.delete !== false &&
+                  selectedRecords.length > 0 && (
+                    <SolidButton
+                      type="button"
+                      label="Delete"
+                      size="sm"
+                      onClick={() => setDeleteRecordsDialogVisible(true)}
+                      className="small-button"
+                      severity="danger"
+                    />
+                  )}
 
-            {actionsAllowed.includes(`${permissionExpression(params.modelName, "delete")}`) &&
-              solidTreeViewMetaData?.data?.solidView?.layout?.attrs.delete !== false &&
-              selectedRecords.length > 0 && (
-                <Button
+                <SolidButton
                   type="button"
-                  label="Delete"
-                  size="small"
-                  onClick={() => setDeleteRecordsDialogVisible(true)}
-                  className="small-button"
-                  severity="danger"
+                  size="sm"
+                  variant="outline"
+                  leftIcon={<RefreshCw size={14} />}
+                  className="solid-icon-button"
+                  onClick={() => { void loadRootGroups(getPagination("root").offset); }}
                 />
-              )}
-
-            <Button
-              type="button"
-              size="small"
-              icon="pi pi-refresh"
-              severity="secondary"
-              className="solid-icon-button"
-              outlined
-              onClick={() => { void loadRootGroups(getPagination("root").offset); }}
-            />
-            {showArchived && (
-              <Button
-                type="button"
-                icon="pi pi-refresh"
-                label="Recover"
-                size="small"
-                severity="secondary"
-                className="hidden lg:flex solid-icon-button "
-                onClick={() => setRecoverDialogVisible(true)}
-              ></Button>
-            )}
+                {showArchived && (
+                  <SolidButton
+                    type="button"
+                    label="Recover"
+                    size="sm"
+                    variant="outline"
+                    leftIcon={<RefreshCw size={14} />}
+                    className="hidden lg:flex solid-icon-button "
+                    onClick={() => setRecoverDialogVisible(true)}
+                  />
+                )}
+
+                {params.embeded === false &&
+                  solidTreeViewLayout?.attrs?.configureView !== false && (
+                    <SolidListViewConfigure
+                      listViewMetaData={solidTreeViewMetaData}
+                      solidListViewLayout={solidTreeViewLayout}
+                      setShowArchived={setShowArchived}
+                      showArchived={showArchived}
+                      viewData={solidTreeViewMetaData}
+                      sizeOptions={sizeOptions}
+                      setSize={setSize}
+                      size={size}
+                      viewModes={viewModes}
+                      params={params}
+                      actionsAllowed={actionsAllowed}
+                      selectedRecords={selectedRecords}
+                      setDialogVisible={setDeleteRecordsDialogVisible}
+                      setShowSaveFilterPopup={setShowSaveFilterPopup}
+                      filters={filters}
+                      handleFetchUpdatedRecords={handleFetchUpdatedRecords}
+                      setRecoverDialogVisible={setRecoverDialogVisible}
+                    />
+                  )}
+              </div>
+            </div>
 
-            {params.embeded === false &&
-              solidTreeViewLayout?.attrs?.configureView !== false && (
-                <SolidListViewConfigure
-                  listViewMetaData={solidTreeViewMetaData}
-                  solidListViewLayout={solidTreeViewLayout}
-                  setShowArchived={setShowArchived}
-                  showArchived={showArchived}
-                  viewData={solidTreeViewMetaData}
-                  sizeOptions={sizeOptions}
-                  setSize={setSize}
-                  size={size}
-                  viewModes={viewModes}
-                  params={params}
-                  actionsAllowed={actionsAllowed}
-                  selectedRecords={selectedRecords}
-                  setDialogVisible={setDeleteRecordsDialogVisible}
-                  setShowSaveFilterPopup={setShowSaveFilterPopup}
-                  filters={filters}
-                  handleFetchUpdatedRecords={handleFetchUpdatedRecords}
-                  setRecoverDialogVisible={setRecoverDialogVisible}
-                />
+            {solidTreeViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
+              showGlobalSearchElement && (
+                <div className="flex lg:hidden">
+                  <SolidGlobalSearchElement
+                    viewType="tree"
+                    showSaveFilterPopup={showSaveFilterPopup}
+                    setShowSaveFilterPopup={setShowSaveFilterPopup}
+                    ref={solidGlobalSearchElementRef}
+                    viewData={solidTreeViewMetaData}
+                    handleApplyCustomFilter={handleApplyCustomFilter}
+                  />
+                </div>
               )}
           </div>
-        </div>
 
-        {solidTreeViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
-          showGlobalSearchElement && (
-            <div className="flex lg:hidden">
-              <SolidGlobalSearchElement
-                viewType="tree"
-                showSaveFilterPopup={showSaveFilterPopup}
-                setShowSaveFilterPopup={setShowSaveFilterPopup}
-                ref={solidGlobalSearchElementRef}
-                viewData={solidTreeViewMetaData}
-                handleApplyCustomFilter={handleApplyCustomFilter}
-              />
-            </div>
-          )}
-      </div>
+          {/* ── Tree table ── */}
+          <div className="solid-datatable-wrapper solid-list-table-area solid-tree-table-area flex-1 min-h-0 overflow-hidden">
+            {activeGroupingRules.length === 0 ? (
+              <div className="solid-empty-listview-placeholder-container solid-tree-empty-state">
+                <div className="solid-empty-listview-placeholder-panel">
+                  <div className="solid-empty-listview-header">
+                    <div className="solid-empty-listview-header-title">{treeViewTitle || "Tree View"}</div>
+                    <div className="solid-empty-listview-header-subtitle">
+                      Build a grouping structure to explore your data in hierarchical levels.
+                    </div>
+                  </div>
 
-      <style>{`
-       
-      `}</style>
+                  <div className="solid-empty-listview-body">
+                    <div className="solid-empty-listview-title">
+                      No grouping rules applied
+                    </div>
+                    <div className="solid-empty-listview-actions">
+                      <SolidButton
+                        type="button"
+                        variant="primary"
+                        size="small"
+                        leftIcon={<Plus size={14} />}
+                        onClick={openGroupingBuilder}
+                      >
+                        Create Groups
+                      </SolidButton>
+                    </div>
+
+                    <div className="solid-empty-listview-description">
+                      Start by adding grouping rules and optional aggregations for this tree view.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <SolidTreeTable
+                value={treeNodes}
+                loading={treeLoading}
+                expandedKeys={expandedKeys}
+                onToggle={(event: any) => setExpandedKeys(event.value)}
+                onExpand={handleNodeExpand}
+                tableStyle={{ minWidth: "max-content" }}
+                tableClassName="solid-data-table"
+                selectionMode="checkbox"
+                selectionKeys={selectedNodeKeys}
+                sortField={sortField}
+                sortOrder={sortOrder as any}
+                removableSort
+                onSort={(e) => {
+                  setSortField(e.sortField || "");
+                  setSortOrder((e.sortOrder as any) || 0);
+                }}
+                onRowClick={(e) => {
+                  if (e.node.leaf !== true) return;
+                  const rowData = e.node.data;
 
-      {/* ── Tree table ── */}
-      <div className="solid-datatable-wrapper solid-treetable-wrapper flex-1 min-h-0 overflow-auto">
-        {activeGroupingRules.length === 0 ? (
-          <div className="flex flex-column align-items-center justify-content-center h-full p-6 text-center">
-            <div className="mb-4" style={{ opacity: 0.1 }}>
-              <HomePageModuleSvg />
-            </div>
-            <h3 className="m-0 mb-2" style={{ color: "var(--solid-dark-title)", fontWeight: 700, fontSize: '1.5rem' }}>
-              Tree View
-            </h3>
-            <p className="m-0 text-sl" style={{ maxWidth: '35rem', lineHeight: '1.5', color: 'var(--text-color)' }}>
-              To visualize your data in a hierarchical structure, please apply a <strong>Grouping Rule</strong> from the Global Search bar above.
-            </p>
-          </div>
+                  if (solidTreeViewLayout?.attrs?.disableRowClick === true) return;
 
-        ) : (
-          <TreeTable
-            value={treeNodes}
-            lazy
-            loading={treeLoading}
-            expandedKeys={expandedKeys}
-            onToggle={(event: any) => setExpandedKeys(event.value)}
-            onExpand={handleNodeExpand}
-            scrollable
-            tableStyle={{ minWidth: "max-content" }}
-            tableClassName="solid-data-table"
-            resizableColumns
-            columnResizeMode="expand"
-            selectionMode="checkbox"
-            selectionKeys={selectedNodeKeys}
-            sortField={sortField}
-            sortOrder={sortOrder as any}
-            removableSort
-            onSort={(e) => {
-              setSortField(e.sortField);
-              setSortOrder(e.sortOrder as any);
-            }}
-            onRowClick={(e) => {
-              const target = e.originalEvent.target as HTMLElement;
-              if (target.closest(".p-checkbox")) return;
-              if (target.closest(".p-c")) return;
-
-              if (e.node.leaf !== true) return;
-              const rowData = e.node.data;
-
-              if (solidTreeViewLayout?.attrs?.disableRowClick === true) return;
-
-              const hasFindPermission = actionsAllowed.includes(
-                permissionExpression(params.modelName, 'findOne')
-              );
-              const hasUpdatePermission =
-                actionsAllowed.includes(permissionExpression(params.modelName, 'update')) &&
-                solidTreeViewLayout?.attrs?.edit !== false;
-
-              if (!(hasFindPermission || hasUpdatePermission)) return;
-
-              // if (params.embeded === true) {
-              // params.handleEditClickForEmbeddedView(rowData?.id);
-              // } else {
-              if (typeof window !== "undefined") {
-                // store a simple marker for the caller
-
-                // also store the full current URL so Back can restore exact state (including action params)
-                try {
-                  sessionStorage.setItem("fromView", "list");
-                  sessionStorage.setItem("fromViewUrl", window.location.pathname + window.location.search);
-                } catch (e) {
-                  // ignore storage errors
+                  const hasFindPermission = actionsAllowed.includes(
+                    permissionExpression(params.modelName, 'findOne')
+                  );
+                  const hasUpdatePermission =
+                    actionsAllowed.includes(permissionExpression(params.modelName, 'update')) &&
+                    solidTreeViewLayout?.attrs?.edit !== false;
+
+                  if (!(hasFindPermission || hasUpdatePermission)) return;
+
+                  // if (params.embeded === true) {
+                  // params.handleEditClickForEmbeddedView(rowData?.id);
+                  // } else {
+                  if (typeof window !== "undefined") {
+                    // store a simple marker for the caller
+
+                    // also store the full current URL so Back can restore exact state (including action params)
+                    try {
+                      sessionStorage.setItem("fromView", "tree");
+                      sessionStorage.setItem("fromViewUrl", window.location.pathname + window.location.search);
+                    } catch (e) {
+                      // ignore storage errors
+                    }
+                  }
+                  router.push(`${editBaseUrl}/${rowData?.id}?viewMode=view&${new URLSearchParams(editActionQueryParams).toString()}`);
+                  // }
                 }
-              }
-              router.push(`${editBaseUrl}/${rowData?.id}?viewMode=view&${new URLSearchParams(editActionQueryParams).toString()}`);
-              // }
-            }
-            }
-            onSelectionChange={(e) => {
-              e.originalEvent.stopPropagation();
-              const incoming = e.value as Record<string, any>;
-
-              setSelectedNodeKeys((prev: any) => {
-                const next: Record<string, any> = {};
-
-                Object.keys(incoming).forEach((key) => {
-                  // Find the node to get its type
-                  const node = findNodeByKey(treeNodes, key);
-                  next[key] = {
-                    ...incoming[key],                              // checked, partialChecked from PrimeReact
-                    nodeType: node?.data?.__treeMeta?.nodeType     // add type from tree
-                      ?? prev[key]?.nodeType,                      // fallback to prev if node not found
-                  };
-                });
-
-                return next;
-              });
-            }}
-
-          >
-            <Column
-              key="tree-group-column"
-              field="__group"
-              header="Group"
-              sortable
-              expander={(node: any) => node?.data?.__treeMeta?.nodeType === "group"}
-              body={groupColumnBody}
-
-              style={{ minWidth: "18rem", display: "flex", alignItems: "center" }}
-            />
-
-            {renderColumnsDynamically()}
-            {renderAggregateColumns()}
-
-            <Column
-              key="tree-last-frozen-column"
-              header=""
-              style={{ width: "20rem" }}
-              body={(node: any) => {
-                const rowData = node?.data as TreeRowData;
-                const nodeMeta = rowData?.__treeMeta;
-
-                // ---------------- NORMAL ROW ----------------
-                if (nodeMeta?.nodeType !== "group") {
-                  return renderRowActions(rowData);
                 }
+                onSelectionChange={(e) => {
+                  e.originalEvent.stopPropagation?.();
+                  const incoming = e.value as SolidTreeSelectionKeys;
+
+                  setSelectedNodeKeys((prev: SolidTreeSelectionKeys) => {
+                    const next: SolidTreeSelectionKeys = {};
+
+                    Object.keys(incoming).forEach((key) => {
+                      // Find the node to get its type
+                      const node = findNodeByKey(treeNodes, key);
+                      next[key] = {
+                        ...incoming[key],                              // checked, partialChecked from PrimeReact
+                        nodeType: node?.data?.__treeMeta?.nodeType     // add type from tree
+                          ?? prev[key]?.nodeType,                      // fallback to prev if node not found
+                      };
+                    });
+
+                    return next;
+                  });
+                }}
 
-                // ---------------- GROUP ROW ----------------
-                const nodeKey = String(node.key);
-                const isExpanded = expandedKeys[nodeKey];
-                const childrenLoaded = isExpanded && node.children && node.children.length > 0;
-                if (!childrenLoaded) return <span>&nbsp;</span>;
-
-                const pagEntry = getPagination(nodeKey);
-                const canPrev = hasPrev(nodeKey);
-                const canNext = hasNext(nodeKey);
-
-                // "in Jharkhand" — this node's own group label
-                const inLabel = nodeMeta.groupLabel ?? "";
-
-                // "of cities" — what the children represent
-                // nextRuleIndex = nodeMeta.ruleIndex + 1
-                const nextRuleIndex = nodeMeta.ruleIndex + 1;
-                const isLeafLevel = nextRuleIndex >= activeGroupingRules.length;
-                const ofLabel = isLeafLevel
-                  ? solidTreeViewMetaData?.data?.solidView?.model?.displayName                                          // leaf → model name
-                  : (() => {
-                    const nextRule = activeGroupingRules[nextRuleIndex];
-                    const fieldName = String(nextRule?.fieldName ?? "");
-                    const fieldMeta = getFieldMetadata(fieldName);
-                    // Use displayName if available, fallback to fieldName
-                    return fieldMeta?.displayName ?? fieldMeta?.name ?? fieldName;
-                  })();
-
-                return (
-                  <div
-                    style={{ display: "flex", alignItems: "center", gap: "0.2rem", justifyContent: "flex-end" }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {/* <span style={{ fontSize: "0.9rem", color: "var(--text-color-secondary)", whiteSpace: "nowrap" }}>
-                        {pagEntry.offset + 1}–{Math.min(pagEntry.offset + pagEntry.limit, pagEntry.total)} of {pagEntry.total} {getSingularAndPlural(ofLabel).toPlural ?? ofLabel} in {inLabel}
-                      </span> */}
-                    <Button
-                      type="button"
-                      icon="pi pi-angle-left"
-                      size="small"
-                      rounded
-                      outlined
-                      disabled={!canPrev || treeLoading}
-                      style={{ padding: 0, border: "none", width: "2rem" }}
-                      className="small-button"
-                      onClick={() => handleNodePageChange(nodeKey, "prev")}
-                    />
-                    <Button
-                      type="button"
-                      icon="pi pi-angle-right"
-                      size="small"
-                      rounded
-                      outlined
-                      disabled={!canNext || treeLoading}
-                      style={{ padding: 0, border: "none", width: "2rem" }}
-                      className="small-button"
-                      onClick={() => handleNodePageChange(nodeKey, "next")}
-                    />
-                  </div>
-                );
-              }}
-            />
-          </TreeTable>
-        )}
-      </div>
-
-      {/* ── Root-level pagination bar ── */}
-      <RootPaginationBar />
-
+              >
+                <SolidTreeColumn
+                  key="tree-group-column"
+                  field="__group"
+                  header="Group"
+                  sortable
+                  frozen
+                  alignFrozen="left"
+                  expander={(node: any) => node?.data?.__treeMeta?.nodeType === "group"}
+                  body={groupColumnBody}
+                  headerClassName="solid-tree-group-header-cell"
+                  bodyClassName="solid-tree-group-body-cell"
+                  style={{ width: "max-content", minWidth: "20rem" }}
+                />
 
+                {renderColumnsDynamically()}
+                {renderAggregateColumns()}
+
+                <SolidTreeColumn
+                  key="tree-last-frozen-column"
+                  header=""
+                  frozen
+                  alignFrozen="right"
+                  style={{ width: "9rem", minWidth: "9rem", maxWidth: "9rem" }}
+                  className="solid-tree-actions-cell"
+                  headerClassName="solid-tree-actions-cell"
+                  body={(node: any) => {
+                    const rowData = node?.data as TreeRowData;
+                    const nodeMeta = rowData?.__treeMeta;
+
+                    // ---------------- NORMAL ROW ----------------
+                    if (nodeMeta?.nodeType !== "group") {
+                      return renderRowActions(rowData);
+                    }
+
+                    // ---------------- GROUP ROW ----------------
+                    const nodeKey = String(node.key);
+                    const isExpanded = expandedKeys[nodeKey];
+                    const childrenLoaded = isExpanded && node.children && node.children.length > 0;
+                    if (!childrenLoaded) return <span>&nbsp;</span>;
+
+                    const canPrev = hasPrev(nodeKey);
+                    const canNext = hasNext(nodeKey);
+
+                    return (
+                      <div
+                        className="solid-tree-node-paginator"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <SolidButton
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          leftIcon={<ChevronLeft size={14} />}
+                          disabled={!canPrev || treeLoading}
+                          className="solid-tree-paginator-btn"
+                          onClick={() => handleNodePageChange(nodeKey, "prev")}
+                        />
+                        <SolidButton
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          leftIcon={<ChevronRight size={14} />}
+                          disabled={!canNext || treeLoading}
+                          className="solid-tree-paginator-btn"
+                          onClick={() => handleNodePageChange(nodeKey, "next")}
+                        />
+                      </div>
+                    );
+                  }}
+                />
+              </SolidTreeTable>
+            )}
+          </div>
 
+          {/* ── Root-level pagination bar ── */}
+          <RootPaginationBar />
+        </div>
+      </div>
 
-      <Dialog
-        header={`Delete ${solidTreeViewMetaData?.data?.solidView?.model?.displayName
-          ? solidTreeViewMetaData?.data?.solidView?.model?.displayName
-          : params?.modelName
-          }`}
-        headerClassName="py-2"
-        contentClassName="px-0 pb-0"
-        visible={deleteEntity}
-        style={{ width: "20vw" }}
-        onHide={() => {
-          if (!deleteEntity) return;
-          setDeleteEntity(false);
+      <SolidDialog
+        open={deleteEntity}
+        onOpenChange={(open) => {
+          if (!open) setDeleteEntity(false);
         }}
-        className="solid-confirm-dialog"
+        contentClassName="solid-confirm-dialog solid-tree-confirm-dialog"
+        showHeader={false}
       >
-        <Divider className="m-0" />
-        <div className="p-4">
-          <p className="m-0 solid-primary-title" style={{ fontSize: 16 }}>
-            {`Are you sure you want to delete this ${solidTreeViewMetaData?.data?.solidView?.model?.displayName
-              ? solidTreeViewMetaData?.data?.solidView?.model?.displayName
-              : params?.modelName
-              }?`}
-          </p>
-          {/* <p className="" style={{ color: 'var{--solid-grey-500}' }}>{selectedSolidViewData?.singularName}</p> */}
-          <div className="flex align-items-center gap-2 mt-3">
-            <Button label="Delete" severity="danger" size="small" onClick={handleDeleteEntity} />
-            <Button label="Cancel" size="small" onClick={() => setDeleteEntity(false)} outlined className='bg-primary-reverse' />
-          </div>
-        </div>
-      </Dialog>
-
-      {/* ── Delete dialog ── */}
-      <Dialog
-        visible={isDeleteRecordsDialogVisible}
-        header="Confirm Delete"
-        onHide={() => setDeleteRecordsDialogVisible(false)}
-        headerClassName="py-2"
-        contentClassName="px-0 pb-0"
-        // style={{ width: '20vw' }}
-        breakpoints={{ '1199px': '30rem', '550px': '85vw' }}
-      >
-        <Divider className="m-0" />
-        <div className="p-4">
-          <p className="m-0 solid-primary-title" style={{ fontSize: 16 }}>Are you sure you want to delete the selected records?</p>
-          <div className="flex align-items-center gap-2 mt-3">
-            <Button label="Delete" severity="danger" size="small" autoFocus onClick={deleteBulk} />
-            <Button label="Cancel" size="small" onClick={onDeleteClose} outlined className='bg-primary-reverse' />
-          </div>
-        </div>
-      </Dialog>
-      <Dialog
-        visible={isRecoverDialogVisible}
-        header="Confirm Recover"
-        modal
-        className="solid-confirm-dialog"
-        footer={() => (
-          <div className="flex justify-content-center">
-            <Button
-              label="Yes"
-              icon="pi pi-check"
-              severity="danger"
-              autoFocus
-              onClick={recoverAll}
-            />
-            <Button
-              label="No"
-              icon="pi pi-times"
-              onClick={() => setRecoverDialogVisible(false)}
-            />
-          </div>
-        )}
-        onHide={() => setRecoverDialogVisible(false)}
+        <SolidDialogHeader>
+          <SolidDialogTitle>
+            Delete {solidTreeViewMetaData?.data?.solidView?.model?.displayName || params?.modelName}
+          </SolidDialogTitle>
+        </SolidDialogHeader>
+        <SolidDialogSeparator />
+        <SolidDialogBody>
+          <SolidDialogDescription className="m-0">
+            {`Are you sure you want to delete this ${solidTreeViewMetaData?.data?.solidView?.model?.displayName || params?.modelName}?`}
+          </SolidDialogDescription>
+        </SolidDialogBody>
+        <SolidDialogFooter>
+          <SolidButton label="Cancel" size="sm" variant="outline" onClick={() => setDeleteEntity(false)} />
+          <SolidButton label="Delete" size="sm" severity="danger" onClick={handleDeleteEntity} />
+        </SolidDialogFooter>
+      </SolidDialog>
+
+      <SolidDialog
+        open={isDeleteRecordsDialogVisible}
+        onOpenChange={(open) => {
+          if (!open) setDeleteRecordsDialogVisible(false);
+        }}
+        contentClassName="solid-confirm-dialog solid-tree-confirm-dialog"
+        showHeader={false}
       >
-        <p>Are you sure you want to recover all records?</p>
-      </Dialog>
-
-      <OverlayPanel
-        ref={op}
-        className="solid-custom-overlay"
-        style={{ top: 10, minWidth: 120 }}
+        <SolidDialogHeader>
+          <SolidDialogTitle>Confirm Delete</SolidDialogTitle>
+        </SolidDialogHeader>
+        <SolidDialogSeparator />
+        <SolidDialogBody>
+          <SolidDialogDescription className="m-0">
+            Are you sure you want to delete the selected records?
+          </SolidDialogDescription>
+        </SolidDialogBody>
+        <SolidDialogFooter>
+          <SolidButton label="Cancel" size="sm" variant="outline" onClick={onDeleteClose} />
+          <SolidButton label="Delete" size="sm" severity="danger" onClick={deleteBulk} />
+        </SolidDialogFooter>
+      </SolidDialog>
+
+      <SolidDialog
+        open={isRecoverDialogVisible}
+        onOpenChange={(open) => {
+          if (!open) setRecoverDialogVisible(false);
+        }}
+        contentClassName="solid-confirm-dialog solid-tree-confirm-dialog"
+        showHeader={false}
       >
-        <div className="flex flex-column gap-1 p-1">
-          {hasEditInContextMenu && (
-            <Button
-              type="button"
-              className="w-full text-left gap-1"
-              label="Edit"
-              size="small"
-              iconPos="left"
-              icon={"pi pi-pencil"}
-              onClick={() => {
-                // if (params.embeded == true) {
-                //   params.handleEditClickForEmbeddedView(
-                //     selectedDataRef.current?.id
-                //   );
-                // } else {
-                try {
-                  sessionStorage.setItem("fromView", "list");
-                  sessionStorage.setItem("fromViewUrl", window.location.pathname + window.location.search);
-                } catch (e) { }
-                router.push(
-                  `${editBaseUrl}/${selectedDataRef.current?.id}?viewMode=edit&${new URLSearchParams(editActionQueryParams).toString()}`
-                );
-                // }
-              }}
-            />
-          )}
-
-          {hasDeleteInContextMenu && !params.embeded && (
-            <Button
-              text
-              type="button"
-              className="w-full text-left gap-1"
-              label="Delete"
-              size="small"
-              iconPos="left"
-              severity="danger"
-              icon={"pi pi-trash"}
-              onClick={() => setDeleteEntity(true)}
-            />
-          )}
-          {hasCustomContextMenuButtons && solidTreeViewLayout?.attrs?.rowButtons
-            ?.filter(
-              (rb: any) =>
-                rb?.attrs?.actionInContextMenu === true &&
-                rb?.attrs?.visible !== false
-            )
-            .map((button: any, index: number) => (
-              <SolidListViewRowButtonContextMenu
-                key={`${index}-${selectedDataRef?.current?.id || ''}`}
-                button={button}
-                params={params}
-                getSelectedSolidViewData={() => selectedDataRef.current}
-                // selectedSolidViewData={selectedSolidViewData}
-                solidListViewMetaData={
-                  solidTreeViewMetaData
-                }
-                handleCustomButtonClick={
-                  handleCustomButtonClick
-                }
-              />
-            ))}
-        </div>
-      </OverlayPanel>
+        <SolidDialogHeader>
+          <SolidDialogTitle>Confirm Recover</SolidDialogTitle>
+        </SolidDialogHeader>
+        <SolidDialogSeparator />
+        <SolidDialogBody>
+          <SolidDialogDescription className="m-0">
+            Are you sure you want to recover all records?
+          </SolidDialogDescription>
+        </SolidDialogBody>
+        <SolidDialogFooter>
+          <SolidButton label="No" size="sm" variant="outline" onClick={() => setRecoverDialogVisible(false)} />
+          <SolidButton label="Yes" size="sm" severity="danger" onClick={recoverAll} />
+        </SolidDialogFooter>
+      </SolidDialog>
 
     </div>
   );