@gadmin2n/schematics 0.0.68 → 0.0.70

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

@@ -1,7 +1,23 @@
-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 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,
@@ -12,7 +28,7 @@ import {
   EyeOutlined,
   TeamOutlined,
   CodeOutlined,
-} from "@ant-design/icons";
+} from '@ant-design/icons';
 import {
   DndContext,
   closestCenter,
@@ -22,32 +38,32 @@ import {
   useSensors,
   DragEndEvent,
   DragOverEvent,
-} from "@dnd-kit/core";
+} 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";
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 
-import { customRequest } from "@/helpers/http";
+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 { 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";
+} 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;
 
@@ -59,14 +75,14 @@ const updatePageOrder = async (
   pageId: number,
   updateData: { sortOrder?: number; parentId?: number | null },
 ): Promise<any> => {
-  return customRequest(`page/updateUnique/${pageId}`, "PATCH", updateData);
+  return customRequest(`page/updateUnique/${pageId}`, 'PATCH', updateData);
 };
 
 const safelyConvertToNumber = (value: unknown): number | null => {
-  if (typeof value === "number" && !Number.isNaN(value)) {
+  if (typeof value === 'number' && !Number.isNaN(value)) {
     return value;
   }
-  if (typeof value === "string" && value.trim().length > 0) {
+  if (typeof value === 'string' && value.trim().length > 0) {
     const parsedNumericValue = Number(value);
     return Number.isNaN(parsedNumericValue) ? null : parsedNumericValue;
   }
@@ -80,24 +96,26 @@ const extractPermissionActionsFromAssociation = (
   const aggregatedPermissionActions = new Set<string>();
 
   const associationActions =
-    associationRecord?.actions ?? associationRecord?.actionList ?? associationRecord?.permissions;
+    associationRecord?.actions ??
+    associationRecord?.actionList ??
+    associationRecord?.permissions;
 
   if (Array.isArray(associationActions)) {
     associationActions.forEach((action: any) => {
-      if (typeof action === "string" && action) {
+      if (typeof action === 'string' && action) {
         aggregatedPermissionActions.add(action);
-      } else if (typeof action === "object" && action?.name) {
+      } else if (typeof action === 'object' && action?.name) {
         aggregatedPermissionActions.add(action.name);
-      } else if (typeof action === "object" && action?.code) {
+      } else if (typeof action === 'object' && action?.code) {
         aggregatedPermissionActions.add(action.code);
       }
     });
-  } else if (typeof associationActions === "string") {
+  } else if (typeof associationActions === 'string') {
     associationActions
-      .split(",")
+      .split(',')
       .map((action: string) => action.trim())
       .filter(Boolean)
-      .forEach(action => aggregatedPermissionActions.add(action));
+      .forEach((action) => aggregatedPermissionActions.add(action));
   }
 
   return Array.from(aggregatedPermissionActions);
@@ -105,41 +123,48 @@ const extractPermissionActionsFromAssociation = (
 
 // Draggable row component for dnd-kit
 interface DraggableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-  "data-row-key": string;
+  '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({
+  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",
+    transition: transition ?? 'transform 200ms ease',
     ...(isDragging
       ? {
-          position: "relative",
+          position: 'relative',
           zIndex: 9999,
-          background: "#bae0ff",
-          boxShadow: "0 8px 24px rgba(22, 119, 255, 0.25)",
-          borderLeft: "3px solid #1677ff",
+          background: '#bae0ff',
+          boxShadow: '0 8px 24px rgba(22, 119, 255, 0.25)',
+          borderLeft: '3px solid #1677ff',
           opacity: 0.95,
-          outline: "1px solid #1677ff",
+          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") {
+      {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" }}
+                style={{ cursor: 'grab', color: '#999', touchAction: 'none' }}
               />
             ),
           });
@@ -154,7 +179,7 @@ export const PageManagementListPage: React.FC = () => {
   const { i18n } = useTranslation();
   const { data: identity } = useGetIdentity<any>();
   const { tableProps } = useTable({
-    resource: "page",
+    resource: 'page',
     pagination: {
       pageSize: 20,
     },
@@ -172,7 +197,9 @@ export const PageManagementListPage: React.FC = () => {
     pageResourceAssociationRequestQuery,
   } = usePageManagement();
 
-  const resourceLookupByIdMap = useMemo<Record<number, ResourceDefinition>>(() => {
+  const resourceLookupByIdMap = useMemo<
+    Record<number, ResourceDefinition>
+  >(() => {
     const resourcesArray: any[] = Array.isArray(availableResourcesData?.data)
       ? availableResourcesData.data
       : [];
@@ -199,20 +226,26 @@ export const PageManagementListPage: React.FC = () => {
   }, [resourceLookupByIdMap]);
 
   const pageMenuTreeOptionsData = useMemo<PageMenuTreeNode[]>(() => {
-    const pagesArray: any[] = Array.isArray(pageListData?.data) ? pageListData.data : [];
+    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);
+      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;
+        safelyConvertToNumber(
+          page?.parentId ?? page?.parent_id ?? page?.parent?.id,
+        ) ?? null;
       const pageDisplayTitle = page?.name || page?.code || `Page ${pageId}`;
 
       nodeMapByPageId.set(pageId, {
@@ -238,19 +271,23 @@ export const PageManagementListPage: React.FC = () => {
 
     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);
+        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 => {
+      nodes.forEach((node) => {
         if (node.children && node.children.length) {
           sortTreeNodesAlphabetically(node.children);
         }
       });
     };
 
-    const removeEmptyChildrenArrays = (nodes: PageMenuTreeNode[]): PageMenuTreeNode[] =>
-      nodes.map(node => {
+    const removeEmptyChildrenArrays = (
+      nodes: PageMenuTreeNode[],
+    ): PageMenuTreeNode[] =>
+      nodes.map((node) => {
         if (node.children && node.children.length) {
           return {
             ...node,
@@ -268,10 +305,13 @@ export const PageManagementListPage: React.FC = () => {
   const pageResourcePermissionSummaryMap = useMemo<
     Record<number, PageResourcePermissionSummary>
   >(() => {
-    const associationsArray: any[] = Array.isArray(pageResourceAssociationsData?.data)
+    const associationsArray: any[] = Array.isArray(
+      pageResourceAssociationsData?.data,
+    )
       ? pageResourceAssociationsData.data
       : [];
-    const summaryMapByPageId: Record<number, PageResourcePermissionSummary> = {};
+    const summaryMapByPageId: Record<number, PageResourcePermissionSummary> =
+      {};
 
     associationsArray.forEach((association: any) => {
       const pageId = safelyConvertToNumber(association?.pageId);
@@ -295,21 +335,31 @@ export const PageManagementListPage: React.FC = () => {
         pageSummary.resourceIds.push(resourceId);
       }
 
-      const resourceRecord = association?.resource ?? resourceLookupByIdMap[resourceId];
+      const resourceRecord =
+        association?.resource ?? resourceLookupByIdMap[resourceId];
       const resourceDisplayName =
-        resourceRecord?.name || resourceRecord?.code || `Resource ${resourceId}`;
-
-      if (resourceDisplayName && !pageSummary.resourceNames.includes(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);
-          }
-        },
-      );
+      extractPermissionActionsFromAssociation(
+        association,
+        resourceRecord,
+      ).forEach((permissionAction) => {
+        if (
+          permissionAction &&
+          !pageSummary.allPermissionActions.includes(permissionAction)
+        ) {
+          pageSummary.allPermissionActions.push(permissionAction);
+        }
+      });
     });
 
     return summaryMapByPageId;
@@ -318,11 +368,13 @@ export const PageManagementListPage: React.FC = () => {
   const getPageResourceAssignmentsForModal = useCallback(
     (pageId: number): PageResourceAssignment[] => {
       console.log(
-        "Getting resource assignments for page ID:",
+        'Getting resource assignments for page ID:',
         pageId,
         pageResourceAssociationsData,
       );
-      const associationsArray: any[] = Array.isArray(pageResourceAssociationsData?.data)
+      const associationsArray: any[] = Array.isArray(
+        pageResourceAssociationsData?.data,
+      )
         ? pageResourceAssociationsData.data
         : [];
 
@@ -336,14 +388,20 @@ export const PageManagementListPage: React.FC = () => {
           return;
         }
 
-        const resourceRecord = association?.resource ?? resourceLookupByIdMap[resourceId];
+        const resourceRecord =
+          association?.resource ?? resourceLookupByIdMap[resourceId];
         const resourceDisplayName =
-          resourceRecord?.name || resourceRecord?.code || `Resource ${resourceId}`;
+          resourceRecord?.name ||
+          resourceRecord?.code ||
+          `Resource ${resourceId}`;
 
         pageAssignments.push({
           resourceId,
           resourceName: resourceDisplayName,
-          assignedPermissions: extractPermissionActionsFromAssociation(association, resourceRecord),
+          assignedPermissions: extractPermissionActionsFromAssociation(
+            association,
+            resourceRecord,
+          ),
         });
       });
 
@@ -353,7 +411,7 @@ export const PageManagementListPage: React.FC = () => {
   );
 
   const [activeModalState, setActiveModalState] = useState<{
-    modalType: "view" | "edit" | "create" | null;
+    modalType: 'view' | 'edit' | 'create' | null;
     targetPageId: number | null;
     defaultParentId?: number | null;
     defaultPathPrefix?: string;
@@ -361,7 +419,7 @@ export const PageManagementListPage: React.FC = () => {
     modalType: null,
     targetPageId: null,
     defaultParentId: null,
-    defaultPathPrefix: "",
+    defaultPathPrefix: '',
   });
 
   // State for draggable table
@@ -383,65 +441,107 @@ export const PageManagementListPage: React.FC = () => {
   } | null>(null);
 
   // State for active tab
-  const [activeTab, setActiveTab] = useState<string>("regular");
+  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 : [];
+  }>({ open: false, title: '', sql: '' });
 
-    // Build pageResources for the given page
-    const buildPageResources = (pageId: number) => {
-      const associationsArray: any[] = Array.isArray(pageResourceAssociationsData?.data)
-        ? pageResourceAssociationsData.data
+  const handleShowSql = useCallback(
+    (record: any, hasChildren: boolean) => {
+      const pagesArray: any[] = Array.isArray(pageListData?.data)
+        ? pageListData.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);
+      // 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 };
+          });
+      };
 
-    // 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),
-        });
+      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 };
+      // 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]);
+      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);
@@ -464,7 +564,7 @@ export const PageManagementListPage: React.FC = () => {
       modalType: null,
       targetPageId: null,
       defaultParentId: null,
-      defaultPathPrefix: "",
+      defaultPathPrefix: '',
     });
   }, []);
 
@@ -477,7 +577,9 @@ export const PageManagementListPage: React.FC = () => {
   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);
+      const filteredSiblings = siblings.filter(
+        (s) => safelyConvertToNumber(s.id) !== dragNodeId,
+      );
 
       if (filteredSiblings.length === 0) {
         // First item in this parent
@@ -502,7 +604,8 @@ export const PageManagementListPage: React.FC = () => {
       const prevSibling = filteredSiblings[dropIndex - 1];
       const nextSibling = filteredSiblings[dropIndex];
       const prevOrder = prevSibling?.sortOrder ?? 0;
-      const nextOrder = nextSibling?.sortOrder ?? prevOrder + SORT_ORDER_GAP * 2;
+      const nextOrder =
+        nextSibling?.sortOrder ?? prevOrder + SORT_ORDER_GAP * 2;
 
       // Calculate middle value
       const newOrder = Math.floor((prevOrder + nextOrder) / 2);
@@ -521,7 +624,7 @@ export const PageManagementListPage: React.FC = () => {
 
   // Toggle expand/collapse for a node
   const handleToggleExpand = useCallback((pageId: number) => {
-    setExpandedKeys(prev => {
+    setExpandedKeys((prev) => {
       const newSet = new Set(prev);
       if (newSet.has(pageId)) {
         newSet.delete(pageId);
@@ -534,7 +637,9 @@ export const PageManagementListPage: React.FC = () => {
 
   // Separate regular pages and virtual pages
   const { regularPagesData, virtualPagesData } = useMemo(() => {
-    const pagesArray: any[] = Array.isArray(pageListData?.data) ? pageListData.data : [];
+    const pagesArray: any[] = Array.isArray(pageListData?.data)
+      ? pageListData.data
+      : [];
     const regular: any[] = [];
     const virtual: any[] = [];
 
@@ -561,7 +666,9 @@ export const PageManagementListPage: React.FC = () => {
       const pendingChange = pendingChanges.get(pageId);
       const sortOrder = pendingChange?.sortOrder ?? page.sortOrder;
       const parentId =
-        pendingChange?.parentId !== undefined ? pendingChange.parentId : (page.parentId ?? null);
+        pendingChange?.parentId !== undefined
+          ? pendingChange.parentId
+          : (page.parentId ?? null);
 
       nodeMapById.set(pageId, {
         ...page,
@@ -574,7 +681,7 @@ export const PageManagementListPage: React.FC = () => {
 
     // Second pass: build tree structure
     const rootNodes: any[] = [];
-    nodeMapById.forEach(node => {
+    nodeMapById.forEach((node) => {
       const parentId = node.parentId;
       if (parentId !== null && nodeMapById.has(parentId)) {
         nodeMapById.get(parentId).children.push(node);
@@ -585,8 +692,10 @@ export const PageManagementListPage: React.FC = () => {
 
     // Sort children by sortOrder
     const sortNodes = (nodes: any[]) => {
-      nodes.sort((a, b) => (a.sortOrder ?? Infinity) - (b.sortOrder ?? Infinity));
-      nodes.forEach(node => {
+      nodes.sort(
+        (a, b) => (a.sortOrder ?? Infinity) - (b.sortOrder ?? Infinity),
+      );
+      nodes.forEach((node) => {
         if (node.children?.length > 0) {
           sortNodes(node.children);
         }
@@ -597,7 +706,7 @@ export const PageManagementListPage: React.FC = () => {
     // Flatten tree to array with depth info (respecting expanded state)
     const result: any[] = [];
     const flatten = (nodes: any[], depth: number, parentExpanded: boolean) => {
-      nodes.forEach(node => {
+      nodes.forEach((node) => {
         // Only show node if its parent is expanded (or it's a root node)
         if (!parentExpanded && depth > 0) return;
 
@@ -625,7 +734,7 @@ export const PageManagementListPage: React.FC = () => {
 
   // Get sortable item IDs for dnd-kit
   const sortableIds = useMemo(() => {
-    return flattenedTableData.map(item => String(item.id));
+    return flattenedTableData.map((item) => String(item.id));
   }, [flattenedTableData]);
 
   // Live-reordered IDs during drag (for visual feedback)
@@ -652,7 +761,7 @@ export const PageManagementListPage: React.FC = () => {
   const handleDragOver = useCallback((event: DragOverEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
-    setActiveSortableIds(prev => {
+    setActiveSortableIds((prev) => {
       const oldIndex = prev.indexOf(String(active.id));
       const newIndex = prev.indexOf(String(over.id));
       if (oldIndex === -1 || newIndex === -1) return prev;
@@ -672,9 +781,15 @@ export const PageManagementListPage: React.FC = () => {
 
       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);
+      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;
 
@@ -698,7 +813,7 @@ export const PageManagementListPage: React.FC = () => {
       // Get all siblings at the target parent level (with pending changes)
       const getSiblingsWithPendingChanges = (parentId: number | null) => {
         return pagesArray
-          .map(page => {
+          .map((page) => {
             const pageId = safelyConvertToNumber(page.id);
             if (pageId === null) return null;
             const pending = pendingChanges.get(pageId);
@@ -706,12 +821,15 @@ export const PageManagementListPage: React.FC = () => {
               ...page,
               id: pageId,
               parentId:
-                pending?.parentId !== undefined ? pending.parentId : (page.parentId ?? null),
+                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,
+            (page): page is NonNullable<typeof page> =>
+              page !== null && page.parentId === parentId,
           )
           .sort((a, b) => a.sortOrder - b.sortOrder);
       };
@@ -719,8 +837,8 @@ export const PageManagementListPage: React.FC = () => {
       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);
+      const overIndex = siblings.findIndex((s) => s.id === overId);
+      const dragIndex = siblings.findIndex((s) => s.id === draggedId);
 
       // Calculate drop index
       let dropIndex: number;
@@ -736,17 +854,22 @@ export const PageManagementListPage: React.FC = () => {
       }
 
       // Calculate new sort order
-      const newSortOrder = calculateNewSortOrder(siblings, dropIndex, draggedId);
+      const newSortOrder = calculateNewSortOrder(
+        siblings,
+        dropIndex,
+        draggedId,
+      );
 
       // Check if anything changed
       const parentChanged = newParentId !== currentParentId;
       const orderChanged =
-        newSortOrder !== (draggedPendingChange?.sortOrder ?? draggedPage.sortOrder ?? 0);
+        newSortOrder !==
+        (draggedPendingChange?.sortOrder ?? draggedPage.sortOrder ?? 0);
 
       if (!parentChanged && !orderChanged) return;
 
       // Update pending changes
-      setPendingChanges(prev => {
+      setPendingChanges((prev) => {
         const newChanges = new Map(prev);
         const existingChange = newChanges.get(draggedId) || {};
 
@@ -759,7 +882,9 @@ export const PageManagementListPage: React.FC = () => {
         return newChanges;
       });
 
-      message.info(`Page "${draggedPage.name}" moved. Click "Save Order" to apply changes.`);
+      message.info(
+        `Page "${draggedPage.name}" moved. Click "Save Order" to apply changes.`,
+      );
     },
     [pageListData, pendingChanges, calculateNewSortOrder],
   );
@@ -769,14 +894,14 @@ export const PageManagementListPage: React.FC = () => {
     if (pendingChanges.size === 0) return;
 
     Modal.confirm({
-      title: "Discard Changes",
+      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" } },
+      okText: 'Discard',
+      okType: 'danger',
+      styles: { body: { padding: '16px 24px' } },
       onOk: () => {
         setPendingChanges(new Map());
-        message.success("Changes discarded");
+        message.success('Changes discarded');
       },
     });
   }, [pendingChanges]);
@@ -784,7 +909,7 @@ export const PageManagementListPage: React.FC = () => {
   // Save all pending changes
   const handleSaveOrder = useCallback(async () => {
     if (pendingChanges.size === 0) {
-      message.info("No changes to save");
+      message.info('No changes to save');
       return;
     }
 
@@ -814,8 +939,8 @@ export const PageManagementListPage: React.FC = () => {
       setPendingChanges(new Map());
       refreshAllPageRelatedData();
     } catch (error) {
-      console.error("Failed to save order:", error);
-      message.error("Failed to save some changes. Please try again.");
+      console.error('Failed to save order:', error);
+      message.error('Failed to save some changes. Please try again.');
     } finally {
       setIsSavingOrder(false);
     }
@@ -829,7 +954,9 @@ export const PageManagementListPage: React.FC = () => {
       if (pageId === null) continue;
       const pendingChange = pendingChanges.get(pageId);
       const parentId =
-        pendingChange?.parentId !== undefined ? pendingChange.parentId : (page.parentId ?? null);
+        pendingChange?.parentId !== undefined
+          ? pendingChange.parentId
+          : (page.parentId ?? null);
       if (!childrenOf.has(parentId)) childrenOf.set(parentId, []);
       childrenOf.get(parentId)!.push(pageId);
     }
@@ -878,10 +1005,10 @@ export const PageManagementListPage: React.FC = () => {
     const permissionSummary = pageResourcePermissionSummaryMap[record.id];
 
     if (!permissionSummary?.resourceNames.length) {
-      return <span style={{ color: "#999" }}>No resources assigned</span>;
+      return <span style={{ color: '#999' }}>No resources assigned</span>;
     }
 
-    const joinedResourceNames = permissionSummary.resourceNames.join(", ");
+    const joinedResourceNames = permissionSummary.resourceNames.join(', ');
     const shouldTruncateDisplay =
       joinedResourceNames.length > RESOURCE_NAME_DISPLAY_TRUNCATION_LIMIT;
     const truncatedDisplayValue = shouldTruncateDisplay
@@ -899,12 +1026,12 @@ export const PageManagementListPage: React.FC = () => {
     const permissionSummary = pageResourcePermissionSummaryMap[record.id];
 
     if (!permissionSummary?.allPermissionActions.length) {
-      return <span style={{ color: "#999" }}>-</span>;
+      return <span style={{ color: '#999' }}>-</span>;
     }
 
     return (
       <Space size={[4, 4]} wrap>
-        {permissionSummary.allPermissionActions.map(permissionAction => (
+        {permissionSummary.allPermissionActions.map((permissionAction) => (
           <Tag key={`${record.id}-${permissionAction}`} color="blue">
             {permissionAction}
           </Tag>
@@ -915,10 +1042,10 @@ export const PageManagementListPage: React.FC = () => {
 
   // Handle click on add child page button
   const handleAddChildPage = useCallback((parentPage: any) => {
-    const parentPath = parentPage.path || "";
-    const pathPrefix = parentPath.endsWith("/") ? parentPath : `${parentPath}/`;
+    const parentPath = parentPage.path || '';
+    const pathPrefix = parentPath.endsWith('/') ? parentPath : `${parentPath}/`;
     setActiveModalState({
-      modalType: "create",
+      modalType: 'create',
       targetPageId: null,
       defaultParentId: parentPage.id,
       defaultPathPrefix: pathPrefix,
@@ -939,7 +1066,9 @@ export const PageManagementListPage: React.FC = () => {
         hideText
         size="small"
         recordItemId={record.id}
-        onClick={() => setActiveModalState({ modalType: "edit", targetPageId: record.id })}
+        onClick={() =>
+          setActiveModalState({ modalType: 'edit', targetPageId: record.id })
+        }
       />
       <Tooltip title="Generate SQL">
         <Button
@@ -957,7 +1086,12 @@ export const PageManagementListPage: React.FC = () => {
               type="default"
               size="small"
               icon={<TeamOutlined />}
-              onClick={() => setAssignRolesTarget({ pageId: record.id, pageName: record.name })}
+              onClick={() =>
+                setAssignRolesTarget({
+                  pageId: record.id,
+                  pageName: record.name,
+                })
+              }
             />
           </Tooltip>
           <Tooltip title="View details">
@@ -987,10 +1121,14 @@ export const PageManagementListPage: React.FC = () => {
         <Tooltip title="Click: expand 2 levels / Double-click: expand all">
           <Button
             onClick={() => {
-              expandClickTimer.current = window.setTimeout(() => handleExpandLevels(1), 200);
+              expandClickTimer.current = window.setTimeout(
+                () => handleExpandLevels(1),
+                200,
+              );
             }}
             onDoubleClick={() => {
-              if (expandClickTimer.current) clearTimeout(expandClickTimer.current);
+              if (expandClickTimer.current)
+                clearTimeout(expandClickTimer.current);
               handleExpandAll();
             }}
           >
@@ -1006,9 +1144,14 @@ export const PageManagementListPage: React.FC = () => {
               onClick={handleSaveOrder}
               loading={isSavingOrder}
             >
-              Save Order ({pendingChanges.size} change{pendingChanges.size > 1 ? "s" : ""})
+              Save Order ({pendingChanges.size} change
+              {pendingChanges.size > 1 ? 's' : ''})
             </Button>
-            <Button icon={<UndoOutlined />} onClick={handleDiscardChanges} disabled={isSavingOrder}>
+            <Button
+              icon={<UndoOutlined />}
+              onClick={handleDiscardChanges}
+              disabled={isSavingOrder}
+            >
               Discard Changes
             </Button>
           </>
@@ -1032,7 +1175,10 @@ export const PageManagementListPage: React.FC = () => {
         onDragOver={handleDragOver}
         onDragEnd={handleDragEnd}
       >
-        <SortableContext items={activeSortableIds} strategy={verticalListSortingStrategy}>
+        <SortableContext
+          items={activeSortableIds}
+          strategy={verticalListSortingStrategy}
+        >
           <Table
             {...tableProps}
             rowKey="id"
@@ -1053,21 +1199,21 @@ export const PageManagementListPage: React.FC = () => {
                 <span
                   style={{
                     paddingLeft: record._depth * 20,
-                    display: "inline-flex",
-                    alignItems: "center",
+                    display: 'inline-flex',
+                    alignItems: 'center',
                   }}
                 >
                   {record._hasChildren ? (
                     <span
-                      onClick={e => {
+                      onClick={(e) => {
                         e.stopPropagation();
                         handleToggleExpand(record.id);
                       }}
                       style={{
-                        cursor: "pointer",
+                        cursor: 'pointer',
                         marginRight: 8,
-                        display: "inline-flex",
-                        alignItems: "center",
+                        display: 'inline-flex',
+                        alignItems: 'center',
                       }}
                     >
                       {record._isExpanded ? (
@@ -1079,7 +1225,9 @@ export const PageManagementListPage: React.FC = () => {
                   ) : (
                     <span style={{ width: 18 }} />
                   )}
-                  {i18n.language === "zh_CN" ? record.zhName || text : record.enName || text}
+                  {i18n.language === 'zh_CN'
+                    ? record.zhName || text
+                    : record.enName || text}
                   {record._isModified && (
                     <Tag color="orange" style={{ marginLeft: 8, fontSize: 10 }}>
                       Modified
@@ -1098,7 +1246,9 @@ export const PageManagementListPage: React.FC = () => {
             <Table.Column dataIndex="creator" title="Creator" />
             <Table.Column
               title="Actions"
-              render={(_, record: any) => renderActionsColumn(record, record._hasChildren)}
+              render={(_, record: any) =>
+                renderActionsColumn(record, record._hasChildren)
+              }
             />
           </Table>
         </SortableContext>
@@ -1108,7 +1258,11 @@ export const PageManagementListPage: React.FC = () => {
 
   // Render virtual pages table (simple table without drag-drop and tree structure)
   const renderVirtualPagesTable = () => (
-    <Table rowKey="id" dataSource={virtualPagesData} pagination={{ pageSize: 20 }}>
+    <Table
+      rowKey="id"
+      dataSource={virtualPagesData}
+      pagination={{ pageSize: 20 }}
+    >
       <Table.Column dataIndex="name" title="Page Name" />
       <Table.Column dataIndex="creator" title="Creator" />
       <Table.Column
@@ -1131,7 +1285,7 @@ export const PageManagementListPage: React.FC = () => {
           type="primary"
           onClick={() =>
             setActiveModalState({
-              modalType: "create",
+              modalType: 'create',
               targetPageId: null,
             })
           }
@@ -1145,31 +1299,32 @@ export const PageManagementListPage: React.FC = () => {
         onChange={setActiveTab}
         items={[
           {
-            key: "regular",
+            key: 'regular',
             label: `Regular Pages (${regularPagesData.length})`,
             children: renderRegularPagesTable(),
           },
           {
-            key: "virtual",
+            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 || []}
-        />
-      )}
+      {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
@@ -1192,7 +1347,7 @@ export const PageManagementListPage: React.FC = () => {
         />
       )}
 
-      {activeModalState.modalType === "create" && (
+      {activeModalState.modalType === 'create' && (
         <CreatePageModal
           onModalClose={handleModalClose}
           onPageCreationSuccess={handleModalOperationSuccess}
@@ -1206,7 +1361,7 @@ export const PageManagementListPage: React.FC = () => {
 
       <SqlModal
         open={sqlModal.open}
-        onClose={() => setSqlModal({ open: false, title: "", sql: "" })}
+        onClose={() => setSqlModal({ open: false, title: '', sql: '' })}
         title={sqlModal.title}
         sql={sqlModal.sql}
       />