@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,1370 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { DeleteButton, EditButton, useTable } from '@refinedev/antd';
+import { useGetIdentity } from '@refinedev/core';
+import {
+  Table,
+  Button,
+  Space,
+  Tooltip,
+  Tag,
+  Alert,
+  Modal,
+  message,
+  Tabs,
+} from 'antd';
+import {
+  SaveOutlined,
+  UndoOutlined,
+  HolderOutlined,
+  RightOutlined,
+  DownOutlined,
+  PlusOutlined,
+  EyeOutlined,
+  TeamOutlined,
+  CodeOutlined,
+} from '@ant-design/icons';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+  DragOverEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+
+import { customRequest } from '@/helpers/http';
+
+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';
+import { SqlModal, generatePageSql } from '../../components/SqlModal';
+
+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: transition ?? 'transform 200ms ease',
+    ...(isDragging
+      ? {
+          position: 'relative',
+          zIndex: 9999,
+          background: '#bae0ff',
+          boxShadow: '0 8px 24px rgba(22, 119, 255, 0.25)',
+          borderLeft: '3px solid #1677ff',
+          opacity: 0.95,
+          outline: '1px solid #1677ff',
+        }
+      : {}),
+  };
+
+  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 { data: identity } = useGetIdentity<any>();
+  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,
+          code: resource?.code ?? String(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');
+
+  // State for SQL modal
+  const [sqlModal, setSqlModal] = useState<{
+    open: boolean;
+    title: string;
+    sql: string;
+  }>({ open: false, title: '', sql: '' });
+
+  const handleShowSql = useCallback(
+    (record: any, hasChildren: boolean) => {
+      const pagesArray: any[] = Array.isArray(pageListData?.data)
+        ? pageListData.data
+        : [];
+
+      // Build pageResources for the given page
+      const buildPageResources = (pageId: number) => {
+        const associationsArray: any[] = Array.isArray(
+          pageResourceAssociationsData?.data,
+        )
+          ? pageResourceAssociationsData.data
+          : [];
+        return associationsArray
+          .filter(
+            (assoc: any) => safelyConvertToNumber(assoc?.pageId) === pageId,
+          )
+          .map((assoc: any) => {
+            const resourceId = safelyConvertToNumber(assoc?.resourceId);
+            // Prefer nested resource object, then fall back to the id-keyed lookup map (which includes code).
+            // The final fallback `String(resourceId)` should never be reached if availableResourcesData is loaded.
+            const resourceRecord =
+              assoc?.resource ??
+              (resourceId !== null ? resourceLookupByIdMap[resourceId] : null);
+            const resourceCode =
+              resourceRecord?.code ??
+              (resourceId !== null ? String(resourceId) : 'unknown');
+            const resourceName =
+              resourceRecord?.name ||
+              resourceRecord?.code ||
+              `Resource ${resourceId}`;
+            const actions = extractPermissionActionsFromAssociation(
+              assoc,
+              resourceRecord,
+            );
+            return { resourceCode, resourceName, actions };
+          });
+      };
+
+      const pageResources = buildPageResources(record.id);
+
+      // Collect child pages if this is a parent
+      const children: Array<{
+        page: any;
+        pageResources: Array<{
+          resourceCode: string;
+          resourceName: string;
+          actions: string[];
+        }>;
+      }> = [];
+      if (hasChildren) {
+        const childPages = pagesArray.filter(
+          (p: any) =>
+            safelyConvertToNumber(p?.parentId ?? p?.parent_id) === record.id,
+        );
+        for (const child of childPages) {
+          const childId = safelyConvertToNumber(child?.id);
+          if (childId === null) continue;
+          children.push({
+            page: child,
+            pageResources: buildPageResources(childId),
+          });
+        }
+      }
+
+      // Resolve parent's code from the in-memory page list so the SQL uses a
+      // portable subquery (SELECT id … WHERE code = '…') instead of a raw
+      // numeric parentId that differs between environments.
+      const parentId = safelyConvertToNumber(
+        record?.parentId ?? record?.parent_id,
+      );
+      const parentPage =
+        parentId !== null
+          ? pagesArray.find(
+              (p: any) => safelyConvertToNumber(p?.id) === parentId,
+            )
+          : null;
+      const recordWithParentCode = {
+        ...record,
+        parentCode: parentPage?.code ?? null,
+      };
+
+      const sql = generatePageSql(
+        recordWithParentCode,
+        pageResources,
+        children,
+        { authorId: identity?.userid, authorName: identity?.username },
+      );
+      setSqlModal({ open: true, title: `SQL — Page: ${record.name}`, sql });
+    },
+    [pageListData, pageResourceAssociationsData, resourceLookupByIdMap],
+  );
+
+  // 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]);
+
+  // Live-reordered IDs during drag (for visual feedback)
+  const [activeSortableIds, setActiveSortableIds] = useState<string[]>([]);
+
+  // Sync activeSortableIds when base list changes (e.g. after save/refresh)
+  useEffect(() => {
+    setActiveSortableIds(sortableIds);
+  }, [sortableIds]);
+
+  // dnd-kit sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 1,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  // Reorder the visual list live during drag for smooth feedback
+  const handleDragOver = useCallback((event: DragOverEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setActiveSortableIds((prev) => {
+      const oldIndex = prev.indexOf(String(active.id));
+      const newIndex = prev.indexOf(String(over.id));
+      if (oldIndex === -1 || newIndex === -1) return prev;
+      return arrayMove(prev, oldIndex, newIndex);
+    });
+  }, []);
+
+  // 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 })
+        }
+      />
+      <Tooltip title="Generate SQL">
+        <Button
+          type="default"
+          size="small"
+          icon={<CodeOutlined />}
+          onClick={() => handleShowSql(record, hasChildren)}
+        />
+      </Tooltip>
+      {/* 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]}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={activeSortableIds}
+          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}
+        />
+      )}
+
+      <SqlModal
+        open={sqlModal.open}
+        onClose={() => setSqlModal({ open: false, title: '', sql: '' })}
+        title={sqlModal.title}
+        sql={sqlModal.sql}
+      />
+    </div>
+  );
+};