@gadmin2n/schematics 0.0.63 → 0.0.65

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/page/list.tsx

@@ -0,0 +1,1113 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { DeleteButton, EditButton, useTable } from "@refinedev/antd";
+import { Table, Button, Space, Tooltip, Tag, Alert, Modal, message, Tabs } from "antd";
+import {
+  SaveOutlined,
+  UndoOutlined,
+  HolderOutlined,
+  RightOutlined,
+  DownOutlined,
+  PlusOutlined,
+  EyeOutlined,
+  TeamOutlined,
+} from "@ant-design/icons";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+
+import { customRequest } from "helpers/login";
+
+import { AssignRolesModal } from "./Components/AssignRolesModal";
+import { EditPageModal } from "./Components/EditPageModal";
+import { CreatePageModal } from "./Components/CreatePageModal";
+import { PageDetailDrawer } from "./Components/PageDetailDrawer";
+import type {
+  PageMenuTreeNode,
+  PageResourceAssignment,
+  PageResourcePermissionSummary,
+  ResourceDefinition,
+} from "./types";
+import { usePageManagement } from "./hooks/usePageManagement";
+import { useTranslation } from "react-i18next";
+
+const RESOURCE_NAME_DISPLAY_TRUNCATION_LIMIT = 40;
+
+// Sparse number gap for sortOrder (allows inserting items between existing ones)
+const SORT_ORDER_GAP = 10000;
+
+// API function for updating page order (sortOrder and parentId)
+const updatePageOrder = async (
+  pageId: number,
+  updateData: { sortOrder?: number; parentId?: number | null },
+): Promise<any> => {
+  return customRequest(`page/updateUnique/${pageId}`, "PATCH", updateData);
+};
+
+const safelyConvertToNumber = (value: unknown): number | null => {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return value;
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsedNumericValue = Number(value);
+    return Number.isNaN(parsedNumericValue) ? null : parsedNumericValue;
+  }
+  return null;
+};
+
+const extractPermissionActionsFromAssociation = (
+  associationRecord: any,
+  resourceRecord: any,
+): string[] => {
+  const aggregatedPermissionActions = new Set<string>();
+
+  const associationActions =
+    associationRecord?.actions ?? associationRecord?.actionList ?? associationRecord?.permissions;
+
+  if (Array.isArray(associationActions)) {
+    associationActions.forEach((action: any) => {
+      if (typeof action === "string" && action) {
+        aggregatedPermissionActions.add(action);
+      } else if (typeof action === "object" && action?.name) {
+        aggregatedPermissionActions.add(action.name);
+      } else if (typeof action === "object" && action?.code) {
+        aggregatedPermissionActions.add(action.code);
+      }
+    });
+  } else if (typeof associationActions === "string") {
+    associationActions
+      .split(",")
+      .map((action: string) => action.trim())
+      .filter(Boolean)
+      .forEach(action => aggregatedPermissionActions.add(action));
+  }
+
+  return Array.from(aggregatedPermissionActions);
+};
+
+// Draggable row component for dnd-kit
+interface DraggableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  "data-row-key": string;
+}
+
+const DraggableRow: React.FC<DraggableRowProps> = ({ children, ...props }) => {
+  const id = props["data-row-key"];
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+
+  const style: React.CSSProperties = {
+    ...props.style,
+    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
+    transition,
+    ...(isDragging
+      ? {
+          position: "relative",
+          zIndex: 9999,
+          background: "#e6f4ff",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          borderLeft: "3px solid #1677ff",
+          opacity: 0.9,
+        }
+      : {}),
+  };
+
+  return (
+    <tr {...props} ref={setNodeRef} style={style} {...attributes}>
+      {React.Children.map(children, child => {
+        if ((child as React.ReactElement).key === "drag-handle") {
+          return React.cloneElement(child as React.ReactElement, {
+            children: (
+              <HolderOutlined
+                {...listeners}
+                style={{ cursor: "grab", color: "#999", touchAction: "none" }}
+              />
+            ),
+          });
+        }
+        return child;
+      })}
+    </tr>
+  );
+};
+
+export const PageManagementListPage: React.FC = () => {
+  const { i18n } = useTranslation();
+  const { tableProps } = useTable({
+    resource: "page",
+    pagination: {
+      pageSize: 20,
+    },
+  });
+
+  const {
+    pageListData,
+    refetchPageList,
+    pageListRequestQuery,
+    availableResourcesData,
+    refetchAvailableResources,
+    resourceListRequestQuery,
+    pageResourceAssociationsData,
+    refetchPageResourceAssociations,
+    pageResourceAssociationRequestQuery,
+  } = usePageManagement();
+
+  const resourceLookupByIdMap = useMemo<Record<number, ResourceDefinition>>(() => {
+    const resourcesArray: any[] = Array.isArray(availableResourcesData?.data)
+      ? availableResourcesData.data
+      : [];
+    const lookupMap: Record<number, ResourceDefinition> = {};
+
+    resourcesArray.forEach((resource: any) => {
+      const resourceId = safelyConvertToNumber(resource?.id);
+      if (resourceId !== null) {
+        lookupMap[resourceId] = {
+          id: resourceId,
+          name: resource?.name || resource?.code || `Resource ${resourceId}`,
+          description: resource?.description,
+          type: resource?.type,
+        };
+      }
+    });
+
+    return lookupMap;
+  }, [availableResourcesData]);
+
+  const availableResourcesListForModal = useMemo<ResourceDefinition[]>(() => {
+    return Object.values(resourceLookupByIdMap);
+  }, [resourceLookupByIdMap]);
+
+  const pageMenuTreeOptionsData = useMemo<PageMenuTreeNode[]>(() => {
+    const pagesArray: any[] = Array.isArray(pageListData?.data) ? pageListData.data : [];
+    const nodeMapByPageId = new Map<
+      number,
+      { treeNode: PageMenuTreeNode; parentPageId: number | null }
+    >();
+
+    pagesArray.forEach((page: any) => {
+      const pageId = safelyConvertToNumber(page?.id ?? page?.pageId ?? page?.page_id);
+      if (pageId === null) {
+        return;
+      }
+
+      const parentPageId =
+        safelyConvertToNumber(page?.parentId ?? page?.parent_id ?? page?.parent?.id) ?? null;
+      const pageDisplayTitle = page?.name || page?.code || `Page ${pageId}`;
+
+      nodeMapByPageId.set(pageId, {
+        treeNode: {
+          title: pageDisplayTitle,
+          value: String(pageId),
+          key: String(pageId),
+          children: [],
+        },
+        parentPageId,
+      });
+    });
+
+    const rootLevelNodes: PageMenuTreeNode[] = [];
+
+    nodeMapByPageId.forEach(({ treeNode, parentPageId }) => {
+      if (parentPageId !== null && nodeMapByPageId.has(parentPageId)) {
+        nodeMapByPageId.get(parentPageId)?.treeNode.children?.push(treeNode);
+      } else {
+        rootLevelNodes.push(treeNode);
+      }
+    });
+
+    const sortTreeNodesAlphabetically = (nodes: PageMenuTreeNode[]) => {
+      nodes.sort((nodeA, nodeB) => {
+        const titleA = typeof nodeA.title === "string" ? nodeA.title : String(nodeA.key);
+        const titleB = typeof nodeB.title === "string" ? nodeB.title : String(nodeB.key);
+        return titleA.localeCompare(titleB);
+      });
+      nodes.forEach(node => {
+        if (node.children && node.children.length) {
+          sortTreeNodesAlphabetically(node.children);
+        }
+      });
+    };
+
+    const removeEmptyChildrenArrays = (nodes: PageMenuTreeNode[]): PageMenuTreeNode[] =>
+      nodes.map(node => {
+        if (node.children && node.children.length) {
+          return {
+            ...node,
+            children: removeEmptyChildrenArrays(node.children),
+          };
+        }
+        const { children, ...nodeWithoutChildren } = node;
+        return nodeWithoutChildren as PageMenuTreeNode;
+      });
+
+    sortTreeNodesAlphabetically(rootLevelNodes);
+    return removeEmptyChildrenArrays(rootLevelNodes);
+  }, [pageListData]);
+
+  const pageResourcePermissionSummaryMap = useMemo<
+    Record<number, PageResourcePermissionSummary>
+  >(() => {
+    const associationsArray: any[] = Array.isArray(pageResourceAssociationsData?.data)
+      ? pageResourceAssociationsData.data
+      : [];
+    const summaryMapByPageId: Record<number, PageResourcePermissionSummary> = {};
+
+    associationsArray.forEach((association: any) => {
+      const pageId = safelyConvertToNumber(association?.pageId);
+      const resourceId = safelyConvertToNumber(association?.resourceId);
+
+      if (pageId === null || resourceId === null) {
+        return;
+      }
+
+      if (!summaryMapByPageId[pageId]) {
+        summaryMapByPageId[pageId] = {
+          resourceIds: [],
+          resourceNames: [],
+          allPermissionActions: [],
+        };
+      }
+
+      const pageSummary = summaryMapByPageId[pageId];
+
+      if (!pageSummary.resourceIds.includes(resourceId)) {
+        pageSummary.resourceIds.push(resourceId);
+      }
+
+      const resourceRecord = association?.resource ?? resourceLookupByIdMap[resourceId];
+      const resourceDisplayName =
+        resourceRecord?.name || resourceRecord?.code || `Resource ${resourceId}`;
+
+      if (resourceDisplayName && !pageSummary.resourceNames.includes(resourceDisplayName)) {
+        pageSummary.resourceNames.push(resourceDisplayName);
+      }
+
+      extractPermissionActionsFromAssociation(association, resourceRecord).forEach(
+        permissionAction => {
+          if (permissionAction && !pageSummary.allPermissionActions.includes(permissionAction)) {
+            pageSummary.allPermissionActions.push(permissionAction);
+          }
+        },
+      );
+    });
+
+    return summaryMapByPageId;
+  }, [pageResourceAssociationsData, resourceLookupByIdMap]);
+
+  const getPageResourceAssignmentsForModal = useCallback(
+    (pageId: number): PageResourceAssignment[] => {
+      console.log(
+        "Getting resource assignments for page ID:",
+        pageId,
+        pageResourceAssociationsData,
+      );
+      const associationsArray: any[] = Array.isArray(pageResourceAssociationsData?.data)
+        ? pageResourceAssociationsData.data
+        : [];
+
+      const pageAssignments: PageResourceAssignment[] = [];
+
+      associationsArray.forEach((association: any) => {
+        const associationPageId = safelyConvertToNumber(association?.pageId);
+        const resourceId = safelyConvertToNumber(association?.resourceId);
+
+        if (associationPageId !== pageId || resourceId === null) {
+          return;
+        }
+
+        const resourceRecord = association?.resource ?? resourceLookupByIdMap[resourceId];
+        const resourceDisplayName =
+          resourceRecord?.name || resourceRecord?.code || `Resource ${resourceId}`;
+
+        pageAssignments.push({
+          resourceId,
+          resourceName: resourceDisplayName,
+          assignedPermissions: extractPermissionActionsFromAssociation(association, resourceRecord),
+        });
+      });
+
+      return pageAssignments;
+    },
+    [pageResourceAssociationsData, resourceLookupByIdMap],
+  );
+
+  const [activeModalState, setActiveModalState] = useState<{
+    modalType: "view" | "edit" | "create" | null;
+    targetPageId: number | null;
+    defaultParentId?: number | null;
+    defaultPathPrefix?: string;
+  }>({
+    modalType: null,
+    targetPageId: null,
+    defaultParentId: null,
+    defaultPathPrefix: "",
+  });
+
+  // State for draggable table
+  const [pendingChanges, setPendingChanges] = useState<
+    Map<number, { sortOrder?: number; parentId?: number | null }>
+  >(new Map());
+  const [isSavingOrder, setIsSavingOrder] = useState(false);
+
+  // State for tree expand/collapse
+  const [expandedKeys, setExpandedKeys] = useState<Set<number>>(new Set());
+
+  // State for detail drawer
+  const [drawerPage, setDrawerPage] = useState<any>(null);
+
+  // State for assign roles modal
+  const [assignRolesTarget, setAssignRolesTarget] = useState<{
+    pageId: number;
+    pageName: string;
+  } | null>(null);
+
+  // State for active tab
+  const [activeTab, setActiveTab] = useState<string>("regular");
+
+  // Ref for expand button click/double-click disambiguation
+  const expandClickTimer = useRef<number | null>(null);
+
+  const refreshAllPageRelatedData = useCallback(() => {
+    refetchPageList(pageListRequestQuery ?? {});
+    refetchAvailableResources(resourceListRequestQuery ?? {});
+    refetchPageResourceAssociations(pageResourceAssociationRequestQuery ?? {});
+  }, [
+    refetchPageList,
+    pageListRequestQuery,
+    refetchAvailableResources,
+    resourceListRequestQuery,
+    refetchPageResourceAssociations,
+    pageResourceAssociationRequestQuery,
+  ]);
+
+  const handleModalClose = useCallback(() => {
+    setActiveModalState({
+      modalType: null,
+      targetPageId: null,
+      defaultParentId: null,
+      defaultPathPrefix: "",
+    });
+  }, []);
+
+  const handleModalOperationSuccess = useCallback(() => {
+    handleModalClose();
+    refreshAllPageRelatedData();
+  }, [refreshAllPageRelatedData, handleModalClose]);
+
+  // Calculate new sortOrder when dropping a node
+  const calculateNewSortOrder = useCallback(
+    (siblings: any[], dropIndex: number, dragNodeId: number): number => {
+      // Filter out the dragged node from siblings
+      const filteredSiblings = siblings.filter(s => safelyConvertToNumber(s.id) !== dragNodeId);
+
+      if (filteredSiblings.length === 0) {
+        // First item in this parent
+        return SORT_ORDER_GAP;
+      }
+
+      if (dropIndex === 0) {
+        // Dropped at the beginning
+        const firstSibling = filteredSiblings[0];
+        const firstOrder = firstSibling?.sortOrder ?? SORT_ORDER_GAP;
+        return Math.max(1, Math.floor(firstOrder / 2));
+      }
+
+      if (dropIndex >= filteredSiblings.length) {
+        // Dropped at the end
+        const lastSibling = filteredSiblings[filteredSiblings.length - 1];
+        const lastOrder = lastSibling?.sortOrder ?? 0;
+        return lastOrder + SORT_ORDER_GAP;
+      }
+
+      // Dropped in the middle
+      const prevSibling = filteredSiblings[dropIndex - 1];
+      const nextSibling = filteredSiblings[dropIndex];
+      const prevOrder = prevSibling?.sortOrder ?? 0;
+      const nextOrder = nextSibling?.sortOrder ?? prevOrder + SORT_ORDER_GAP * 2;
+
+      // Calculate middle value
+      const newOrder = Math.floor((prevOrder + nextOrder) / 2);
+
+      // If there's no room (gap too small), we need to redistribute
+      if (newOrder <= prevOrder || newOrder >= nextOrder) {
+        // Return a value that signals we need redistribution
+        // For now, just use prevOrder + 1 and let batch save handle redistribution
+        return prevOrder + 1;
+      }
+
+      return newOrder;
+    },
+    [],
+  );
+
+  // Toggle expand/collapse for a node
+  const handleToggleExpand = useCallback((pageId: number) => {
+    setExpandedKeys(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(pageId)) {
+        newSet.delete(pageId);
+      } else {
+        newSet.add(pageId);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // Separate regular pages and virtual pages
+  const { regularPagesData, virtualPagesData } = useMemo(() => {
+    const pagesArray: any[] = Array.isArray(pageListData?.data) ? pageListData.data : [];
+    const regular: any[] = [];
+    const virtual: any[] = [];
+
+    pagesArray.forEach((page: any) => {
+      if (page.isVirtual) {
+        virtual.push(page);
+      } else {
+        regular.push(page);
+      }
+    });
+
+    return { regularPagesData: regular, virtualPagesData: virtual };
+  }, [pageListData]);
+
+  // Flatten tree data for table display (with depth info for indentation) - only for regular (non-virtual) pages
+  const flattenedTableData = useMemo(() => {
+    const nodeMapById = new Map<number, any>();
+
+    // First pass: create all nodes with pending changes applied (only regular pages)
+    regularPagesData.forEach((page: any) => {
+      const pageId = safelyConvertToNumber(page?.id);
+      if (pageId === null) return;
+
+      const pendingChange = pendingChanges.get(pageId);
+      const sortOrder = pendingChange?.sortOrder ?? page.sortOrder;
+      const parentId =
+        pendingChange?.parentId !== undefined ? pendingChange.parentId : (page.parentId ?? null);
+
+      nodeMapById.set(pageId, {
+        ...page,
+        id: pageId,
+        sortOrder,
+        parentId,
+        children: [],
+      });
+    });
+
+    // Second pass: build tree structure
+    const rootNodes: any[] = [];
+    nodeMapById.forEach(node => {
+      const parentId = node.parentId;
+      if (parentId !== null && nodeMapById.has(parentId)) {
+        nodeMapById.get(parentId).children.push(node);
+      } else {
+        rootNodes.push(node);
+      }
+    });
+
+    // Sort children by sortOrder
+    const sortNodes = (nodes: any[]) => {
+      nodes.sort((a, b) => (a.sortOrder ?? Infinity) - (b.sortOrder ?? Infinity)); 
+      nodes.forEach(node => {
+        if (node.children?.length > 0) {
+          sortNodes(node.children);
+        }
+      });
+    };
+    sortNodes(rootNodes);
+
+    // Flatten tree to array with depth info (respecting expanded state)
+    const result: any[] = [];
+    const flatten = (nodes: any[], depth: number, parentExpanded: boolean) => {
+      nodes.forEach(node => {
+        // Only show node if its parent is expanded (or it's a root node)
+        if (!parentExpanded && depth > 0) return;
+
+        const { children, ...nodeWithoutChildren } = node;
+        const hasChildren = children?.length > 0;
+        const isExpanded = expandedKeys.has(node.id);
+
+        result.push({
+          ...nodeWithoutChildren,
+          _depth: depth,
+          _hasChildren: hasChildren,
+          _isExpanded: isExpanded,
+          _isModified: pendingChanges.has(node.id),
+        });
+
+        if (hasChildren) {
+          flatten(children, depth + 1, isExpanded);
+        }
+      });
+    };
+    flatten(rootNodes, 0, true);
+
+    return result;
+  }, [regularPagesData, pendingChanges, expandedKeys]);
+
+  // Get sortable item IDs for dnd-kit
+  const sortableIds = useMemo(() => {
+    return flattenedTableData.map(item => String(item.id));
+  }, [flattenedTableData]);
+
+  // dnd-kit sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 1,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  // Handle drag end for dnd-kit
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (!over || active.id === over.id) return;
+
+      const draggedId = safelyConvertToNumber(active.id);
+      const overId = safelyConvertToNumber(over.id);
+
+      if (draggedId === null || overId === null) return;
+
+      const pagesArray: any[] = Array.isArray(pageListData?.data) ? pageListData.data : [];
+      const draggedPage = pagesArray.find(p => safelyConvertToNumber(p.id) === draggedId);
+      const overPage = pagesArray.find(p => safelyConvertToNumber(p.id) === overId);
+
+      if (!draggedPage || !overPage) return;
+
+      // Get target's parentId (with pending changes applied)
+      const overPendingChange = pendingChanges.get(overId);
+      const targetParentId =
+        overPendingChange?.parentId !== undefined
+          ? overPendingChange.parentId
+          : (overPage.parentId ?? null);
+
+      // Get dragged item's current parentId
+      const draggedPendingChange = pendingChanges.get(draggedId);
+      const currentParentId =
+        draggedPendingChange?.parentId !== undefined
+          ? draggedPendingChange.parentId
+          : (draggedPage.parentId ?? null);
+
+      // Determine new parentId - when dropping on an item, take its parentId (same level)
+      const newParentId = targetParentId;
+
+      // Get all siblings at the target parent level (with pending changes)
+      const getSiblingsWithPendingChanges = (parentId: number | null) => {
+        return pagesArray
+          .map(page => {
+            const pageId = safelyConvertToNumber(page.id);
+            if (pageId === null) return null;
+            const pending = pendingChanges.get(pageId);
+            return {
+              ...page,
+              id: pageId,
+              parentId:
+                pending?.parentId !== undefined ? pending.parentId : (page.parentId ?? null),
+              sortOrder: pending?.sortOrder ?? page.sortOrder ?? 0,
+            };
+          })
+          .filter(
+            (page): page is NonNullable<typeof page> => page !== null && page.parentId === parentId,
+          )
+          .sort((a, b) => a.sortOrder - b.sortOrder);
+      };
+
+      const siblings = getSiblingsWithPendingChanges(newParentId);
+
+      // Find the position of the over item in siblings
+      const overIndex = siblings.findIndex(s => s.id === overId);
+      const dragIndex = siblings.findIndex(s => s.id === draggedId);
+
+      // Calculate drop index
+      let dropIndex: number;
+      if (dragIndex === -1) {
+        // Dragged item is not in this parent group (moving to new parent)
+        dropIndex = overIndex;
+      } else if (dragIndex < overIndex) {
+        // Moving down
+        dropIndex = overIndex;
+      } else {
+        // Moving up
+        dropIndex = overIndex;
+      }
+
+      // Calculate new sort order
+      const newSortOrder = calculateNewSortOrder(siblings, dropIndex, draggedId);
+
+      // Check if anything changed
+      const parentChanged = newParentId !== currentParentId;
+      const orderChanged =
+        newSortOrder !== (draggedPendingChange?.sortOrder ?? draggedPage.sortOrder ?? 0);
+
+      if (!parentChanged && !orderChanged) return;
+
+      // Update pending changes
+      setPendingChanges(prev => {
+        const newChanges = new Map(prev);
+        const existingChange = newChanges.get(draggedId) || {};
+
+        newChanges.set(draggedId, {
+          ...existingChange,
+          ...(parentChanged && { parentId: newParentId }),
+          sortOrder: newSortOrder,
+        });
+
+        return newChanges;
+      });
+
+      message.info(`Page "${draggedPage.name}" moved. Click "Save Order" to apply changes.`);
+    },
+    [pageListData, pendingChanges, calculateNewSortOrder],
+  );
+
+  // Discard all pending changes
+  const handleDiscardChanges = useCallback(() => {
+    if (pendingChanges.size === 0) return;
+
+    Modal.confirm({
+      title: "Discard Changes",
+      content: `Are you sure you want to discard ${pendingChanges.size} pending change(s)?`,
+      okText: "Discard",
+      okType: "danger",
+      styles: { body: { padding: "16px 24px" } },
+      onOk: () => {
+        setPendingChanges(new Map());
+        message.success("Changes discarded");
+      },
+    });
+  }, [pendingChanges]);
+
+  // Save all pending changes
+  const handleSaveOrder = useCallback(async () => {
+    if (pendingChanges.size === 0) {
+      message.info("No changes to save");
+      return;
+    }
+
+    setIsSavingOrder(true);
+
+    try {
+      const updatePromises: Promise<any>[] = [];
+
+      pendingChanges.forEach((change, pageId) => {
+        const updateData: { sortOrder?: number; parentId?: number | null } = {};
+
+        if (change.sortOrder !== undefined) {
+          updateData.sortOrder = change.sortOrder;
+        }
+        if (change.parentId !== undefined) {
+          updateData.parentId = change.parentId;
+        }
+
+        if (Object.keys(updateData).length > 0) {
+          updatePromises.push(updatePageOrder(pageId, updateData));
+        }
+      });
+
+      await Promise.all(updatePromises);
+
+      message.success(`Successfully updated ${pendingChanges.size} page(s)`);
+      setPendingChanges(new Map());
+      refreshAllPageRelatedData();
+    } catch (error) {
+      console.error("Failed to save order:", error);
+      message.error("Failed to save some changes. Please try again.");
+    } finally {
+      setIsSavingOrder(false);
+    }
+  }, [pendingChanges, refreshAllPageRelatedData]);
+
+  // Build parent-children lookup for expand operations
+  const parentChildrenMap = useMemo(() => {
+    const childrenOf = new Map<number | null, number[]>(); // parentId -> childIds
+    for (const page of regularPagesData) {
+      const pageId = safelyConvertToNumber(page?.id);
+      if (pageId === null) continue;
+      const pendingChange = pendingChanges.get(pageId);
+      const parentId =
+        pendingChange?.parentId !== undefined ? pendingChange.parentId : (page.parentId ?? null);
+      if (!childrenOf.has(parentId)) childrenOf.set(parentId, []);
+      childrenOf.get(parentId)!.push(pageId);
+    }
+    return childrenOf;
+  }, [regularPagesData, pendingChanges]);
+
+  // Expand to N levels (single click = 2 levels)
+  const handleExpandLevels = useCallback(
+    (maxDepth: number) => {
+      const keysToExpand = new Set<number>();
+      const expand = (parentId: number | null, depth: number) => {
+        if (depth >= maxDepth) return;
+        const children = parentChildrenMap.get(parentId);
+        if (!children) return;
+        for (const childId of children) {
+          // Only expand nodes that have children
+          if (parentChildrenMap.has(childId)) {
+            keysToExpand.add(childId);
+            expand(childId, depth + 1);
+          }
+        }
+      };
+      expand(null, 0);
+      setExpandedKeys(keysToExpand);
+    },
+    [parentChildrenMap],
+  );
+
+  // Expand all nodes (double click)
+  const handleExpandAll = useCallback(() => {
+    // Expand every node that has children
+    const keysToExpand = new Set<number>();
+    for (const [parentId] of parentChildrenMap) {
+      if (parentId !== null) keysToExpand.add(parentId);
+    }
+    setExpandedKeys(keysToExpand);
+  }, [parentChildrenMap]);
+
+  // Collapse all nodes
+  const handleCollapseAll = useCallback(() => {
+    setExpandedKeys(new Set());
+  }, []);
+
+  // Common column renderers for both tables
+  const renderAssignedResourcesColumn = (record: any) => {
+    const permissionSummary = pageResourcePermissionSummaryMap[record.id];
+
+    if (!permissionSummary?.resourceNames.length) {
+      return <span style={{ color: "#999" }}>No resources assigned</span>;
+    }
+
+    const joinedResourceNames = permissionSummary.resourceNames.join(", ");
+    const shouldTruncateDisplay =
+      joinedResourceNames.length > RESOURCE_NAME_DISPLAY_TRUNCATION_LIMIT;
+    const truncatedDisplayValue = shouldTruncateDisplay
+      ? `${joinedResourceNames.slice(0, RESOURCE_NAME_DISPLAY_TRUNCATION_LIMIT)}...`
+      : joinedResourceNames;
+
+    return (
+      <Tooltip title={joinedResourceNames}>
+        <span>{truncatedDisplayValue}</span>
+      </Tooltip>
+    );
+  };
+
+  const renderPermissionActionsColumn = (record: any) => {
+    const permissionSummary = pageResourcePermissionSummaryMap[record.id];
+
+    if (!permissionSummary?.allPermissionActions.length) {
+      return <span style={{ color: "#999" }}>-</span>;
+    }
+
+    return (
+      <Space size={[4, 4]} wrap>
+        {permissionSummary.allPermissionActions.map(permissionAction => (
+          <Tag key={`${record.id}-${permissionAction}`} color="blue">
+            {permissionAction}
+          </Tag>
+        ))}
+      </Space>
+    );
+  };
+
+  // Handle click on add child page button
+  const handleAddChildPage = useCallback((parentPage: any) => {
+    const parentPath = parentPage.path || "";
+    const pathPrefix = parentPath.endsWith("/") ? parentPath : `${parentPath}/`;
+    setActiveModalState({
+      modalType: "create",
+      targetPageId: null,
+      defaultParentId: parentPage.id,
+      defaultPathPrefix: pathPrefix,
+    });
+  }, []);
+
+  const renderActionsColumn = (record: any, hasChildren: boolean = false) => (
+    <Space>
+      <Tooltip title="Add child page">
+        <Button
+          type="default"
+          size="small"
+          icon={<PlusOutlined />}
+          onClick={() => handleAddChildPage(record)}
+        />
+      </Tooltip>
+      <EditButton
+        hideText
+        size="small"
+        recordItemId={record.id}
+        onClick={() => setActiveModalState({ modalType: "edit", targetPageId: record.id })}
+      />
+      {/* Only show delete button for leaf nodes (pages without children) */}
+      {!hasChildren && (
+        <>
+          <Tooltip title="Assign roles">
+            <Button
+              type="default"
+              size="small"
+              icon={<TeamOutlined />}
+              onClick={() => setAssignRolesTarget({ pageId: record.id, pageName: record.name })}
+            />
+          </Tooltip>
+          <Tooltip title="View details">
+            <Button
+              type="default"
+              size="small"
+              icon={<EyeOutlined />}
+              onClick={() => setDrawerPage(record)}
+            />
+          </Tooltip>
+          <DeleteButton
+            hideText
+            size="small"
+            recordItemId={record.id}
+            resource="page"
+            onSuccess={() => refreshAllPageRelatedData()}
+          />
+        </>
+      )}
+    </Space>
+  );
+
+  // Render regular pages table with drag-drop
+  const renderRegularPagesTable = () => (
+    <>
+      <Space style={{ marginBottom: 16 }}>
+        <Tooltip title="Click: expand 2 levels / Double-click: expand all">
+          <Button
+            onClick={() => {
+              expandClickTimer.current = window.setTimeout(() => handleExpandLevels(1), 200);
+            }}
+            onDoubleClick={() => {
+              if (expandClickTimer.current) clearTimeout(expandClickTimer.current);
+              handleExpandAll();
+            }}
+          >
+            Expand All
+          </Button>
+        </Tooltip>
+        <Button onClick={handleCollapseAll}>Collapse All</Button>
+        {pendingChanges.size > 0 && (
+          <>
+            <Button
+              type="primary"
+              icon={<SaveOutlined />}
+              onClick={handleSaveOrder}
+              loading={isSavingOrder}
+            >
+              Save Order ({pendingChanges.size} change{pendingChanges.size > 1 ? "s" : ""})
+            </Button>
+            <Button icon={<UndoOutlined />} onClick={handleDiscardChanges} disabled={isSavingOrder}>
+              Discard Changes
+            </Button>
+          </>
+        )}
+      </Space>
+
+      {/* Info alert about drag and drop */}
+      <Alert
+        message="Drag and drop rows using the handle (⋮⋮) to reorder pages. Changes are saved in batch when you click 'Save Order'."
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+        closable
+      />
+
+      {/* Table with dnd-kit drag and drop */}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToVerticalAxis]}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+          <Table
+            {...tableProps}
+            rowKey="id"
+            dataSource={flattenedTableData}
+            pagination={false}
+            components={{
+              body: {
+                row: DraggableRow,
+              },
+            }}
+          >
+            {/* Drag handle column */}
+            <Table.Column key="drag-handle" width={50} render={() => null} />
+            <Table.Column
+              dataIndex="name"
+              title="Page Name"
+              render={(text, record: any) => (
+                <span
+                  style={{
+                    paddingLeft: record._depth * 20,
+                    display: "inline-flex",
+                    alignItems: "center",
+                  }}
+                >
+                  {record._hasChildren ? (
+                    <span
+                      onClick={e => {
+                        e.stopPropagation();
+                        handleToggleExpand(record.id);
+                      }}
+                      style={{
+                        cursor: "pointer",
+                        marginRight: 8,
+                        display: "inline-flex",
+                        alignItems: "center",
+                      }}
+                    >
+                      {record._isExpanded ? (
+                        <DownOutlined style={{ fontSize: 10 }} />
+                      ) : (
+                        <RightOutlined style={{ fontSize: 10 }} />
+                      )}
+                    </span>
+                  ) : (
+                    <span style={{ width: 18 }} />
+                  )}
+                  {i18n.language === "zh_CN" ? record.zhName || text : record.enName || text}
+                  {record._isModified && (
+                    <Tag color="orange" style={{ marginLeft: 8, fontSize: 10 }}>
+                      Modified
+                    </Tag>
+                  )}
+                </span>
+              )}
+            />
+            <Table.Column dataIndex="path" title="Page Path" />
+            <Table.Column
+              dataIndex="description"
+              title="Description"
+              ellipsis={{ showTitle: true }}
+              onCell={() => ({ style: { maxWidth: 200 } })}
+            />
+            <Table.Column dataIndex="creator" title="Creator" />
+            <Table.Column
+              title="Actions"
+              render={(_, record: any) => renderActionsColumn(record, record._hasChildren)}
+            />
+          </Table>
+        </SortableContext>
+      </DndContext>
+    </>
+  );
+
+  // Render virtual pages table (simple table without drag-drop and tree structure)
+  const renderVirtualPagesTable = () => (
+    <Table rowKey="id" dataSource={virtualPagesData} pagination={{ pageSize: 20 }}>
+      <Table.Column dataIndex="name" title="Page Name" />
+      <Table.Column dataIndex="creator" title="Creator" />
+      <Table.Column
+        dataIndex="description"
+        title="Description"
+        ellipsis={{ showTitle: true }}
+        onCell={() => ({ style: { maxWidth: 200 } })}
+      />
+      <Table.Column
+        title="Actions"
+        render={(_, record: any) => renderActionsColumn(record, false)}
+      />
+    </Table>
+  );
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 16 }}>
+        <Button
+          type="primary"
+          onClick={() =>
+            setActiveModalState({
+              modalType: "create",
+              targetPageId: null,
+            })
+          }
+        >
+          Create Page
+        </Button>
+      </Space>
+
+      <Tabs
+        activeKey={activeTab}
+        onChange={setActiveTab}
+        items={[
+          {
+            key: "regular",
+            label: `Regular Pages (${regularPagesData.length})`,
+            children: renderRegularPagesTable(),
+          },
+          {
+            key: "virtual",
+            label: `Virtual Pages (${virtualPagesData.length})`,
+            children: renderVirtualPagesTable(),
+          },
+        ]}
+      />
+
+      {activeModalState.modalType === "edit" && activeModalState.targetPageId && (
+        <EditPageModal
+          pageIdToEdit={activeModalState.targetPageId}
+          onModalClose={handleModalClose}
+          onPageEditSuccess={handleModalOperationSuccess}
+          parentPageTreeOptions={pageMenuTreeOptionsData}
+          allAvailableResources={availableResourcesListForModal}
+          currentPageResourceAssignments={getPageResourceAssignmentsForModal(
+            activeModalState.targetPageId,
+          )}
+          allPagesData={pageListData?.data || []}
+        />
+      )}
+
+      {drawerPage && (
+        <PageDetailDrawer
+          page={drawerPage}
+          open={!!drawerPage}
+          onClose={() => setDrawerPage(null)}
+        />
+      )}
+
+      {assignRolesTarget && (
+        <AssignRolesModal
+          pageId={assignRolesTarget.pageId}
+          pageName={assignRolesTarget.pageName}
+          open={!!assignRolesTarget}
+          onClose={() => setAssignRolesTarget(null)}
+          onSuccess={() => {
+            setAssignRolesTarget(null);
+            refreshAllPageRelatedData();
+          }}
+        />
+      )}
+
+      {activeModalState.modalType === "create" && (
+        <CreatePageModal
+          onModalClose={handleModalClose}
+          onPageCreationSuccess={handleModalOperationSuccess}
+          parentPageTreeOptions={pageMenuTreeOptionsData}
+          allAvailableResources={availableResourcesListForModal}
+          allPagesData={pageListData?.data || []}
+          defaultParentId={activeModalState.defaultParentId}
+          defaultPathPrefix={activeModalState.defaultPathPrefix}
+        />
+      )}
+    </div>
+  );
+};