Merge remote-tracking branch 'origin/dev' into dev

adminfront/src/features/tenants/routes/TenantListPage.tsx

@@ -21,6 +21,12 @@ import {
 } from "lucide-react";
 import * as React from "react";
 import { Link, useNavigate } from "react-router-dom";
+import {
+  sortItems,
+  toggleSort,
+  type SortConfig,
+  type SortResolverMap,
+} from "../../../../../common/core/utils";
 import { RoleGuard } from "../../../components/auth/RoleGuard";
 import { Badge } from "../../../components/ui/badge";
 import { Button } from "../../../components/ui/button";
@@ -82,10 +88,7 @@ import {
 const tenantCSVTemplate =
   "name,type,parent_tenant_slug,slug,memo,email_domain,visibility,org_unit_type\n";
 
-type SortConfig = {
-  key: keyof TenantSummary | "recursiveMemberCount";
-  direction: "asc" | "desc";
-};
+type TenantSortKey = keyof TenantSummary | "recursiveMemberCount";
 
 const getTenantIcon = (type?: string) => {
   switch (type?.toUpperCase()) {
@@ -225,7 +228,8 @@ function TenantListPage() {
   const [viewMode, setViewMode] = React.useState<"list" | "hierarchy">("list");
   const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
   const [search, setSearch] = React.useState("");
-  const [sortConfig, setSortConfig] = React.useState<SortConfig | null>(null);
+  const [sortConfig, setSortConfig] =
+    React.useState<SortConfig<TenantSortKey> | null>(null);
   const fileInputRef = React.useRef<HTMLInputElement | null>(null);
   const [importMessage, setImportMessage] = React.useState("");
   const [previewRows, setPreviewRows] = React.useState<
@@ -363,6 +367,17 @@ function TenantListPage() {
   const allTenants = query.data?.items ?? [];
   const importParentOptionGroups =
     buildTenantImportParentOptionGroups(allTenants);
+  const tenantSortResolvers = React.useMemo<
+    SortResolverMap<
+      TenantSummary & { recursiveMemberCount: number },
+      TenantSortKey
+    >
+  >(
+    () => ({
+      recursiveMemberCount: (tenant) => tenant.recursiveMemberCount,
+    }),
+    [],
+  );
   const tenants = React.useMemo(() => {
     // 1. Calculate recursive counts
     // buildTenantFullTree returns subTree which represents roots, but it also mutates the mapped nodes internally.
@@ -396,38 +411,14 @@ function TenantListPage() {
       );
     }
 
-    if (sortConfig) {
-      enriched.sort((a, b) => {
-        const aValue = a[sortConfig.key as keyof typeof a];
-        const bValue = b[sortConfig.key as keyof typeof b];
+    return sortItems(enriched, sortConfig, tenantSortResolvers);
+  }, [allTenants, search, sortConfig, tenantSortResolvers]);
 
-        if (aValue === bValue) return 0;
-        if (aValue === null || aValue === undefined) return 1;
-        if (bValue === null || bValue === undefined) return -1;
-
-        if (sortConfig.direction === "asc") {
-          return aValue < bValue ? -1 : 1;
-        }
-        return aValue > bValue ? -1 : 1;
-      });
-    }
-
-    return enriched;
-  }, [allTenants, search, sortConfig]);
-
-  const requestSort = (key: SortConfig["key"]) => {
-    let direction: "asc" | "desc" = "asc";
-    if (
-      sortConfig &&
-      sortConfig.key === key &&
-      sortConfig.direction === "asc"
-    ) {
-      direction = "desc";
-    }
-    setSortConfig({ key, direction });
+  const requestSort = (key: TenantSortKey) => {
+    setSortConfig((current) => toggleSort(current, key));
   };
 
-  const getSortIcon = (key: SortConfig["key"]) => {
+  const getSortIcon = (key: TenantSortKey) => {
     if (!sortConfig || sortConfig.key !== key) {
       return <ArrowUpDown size={14} className="ml-1 opacity-50" />;
     }

adminfront/src/features/users/UserListPage.tsx

@@ -50,6 +50,12 @@ import {
   TableRow,
 } from "../../components/ui/table";
 import { toast } from "../../components/ui/use-toast";
+import {
+  sortItems,
+  toggleSort,
+  type SortConfig,
+  type SortResolverMap,
+} from "../../../../common/core/utils";
 import {
   type UserSummary,
   bulkDeleteUsers,
@@ -71,10 +77,7 @@ type UserSchemaField = {
   type: string;
 };
 
-type SortConfig = {
-  key: string;
-  direction: "asc" | "desc";
-};
+type UserSortKey = string;
 
 function UserListPage() {
   const navigate = useNavigate();
@@ -86,7 +89,8 @@ function UserListPage() {
     Record<string, boolean>
   >({});
   const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>([]);
-  const [sortConfig, setSortConfig] = React.useState<SortConfig | null>(null);
+  const [sortConfig, setSortConfig] =
+    React.useState<SortConfig<UserSortKey> | null>(null);
 
   const limit = 1000;
   const offset = (page - 1) * limit;
@@ -219,60 +223,40 @@ function UserListPage() {
       : null;
 
   const rawItems = query.data?.items ?? [];
+  const userSortResolvers = React.useMemo<
+    SortResolverMap<UserSummary, UserSortKey>
+  >(
+    () =>
+      userSchema.reduce<SortResolverMap<UserSummary, UserSortKey>>(
+        (accumulator, field) => {
+          accumulator[field.key] = (user) => {
+            const value = user.metadata?.[field.key];
+            return typeof value === "string" ||
+              typeof value === "number" ||
+              typeof value === "boolean"
+              ? value
+              : null;
+          };
+          return accumulator;
+        },
+        {
+          name_email: (user) =>
+            `${user.name ?? ""} ${user.email ?? ""} ${user.phone ?? ""}`,
+          tenant_dept: (user) =>
+            `${user.tenant?.name ?? user.tenantSlug ?? ""} ${user.department ?? ""}`,
+        },
+      ),
+    [userSchema],
+  );
   const items = React.useMemo(() => {
-    const sorted = [...rawItems];
-    if (sortConfig) {
-      sorted.sort((a, b) => {
-        let aValue: string | number | boolean | null | undefined;
-        let bValue: string | number | boolean | null | undefined;
+    return sortItems(rawItems, sortConfig, userSortResolvers);
+  }, [rawItems, sortConfig, userSortResolvers]);
 
-        if (sortConfig.key === "name_email") {
-          aValue = a.name?.toLowerCase() || "";
-          bValue = b.name?.toLowerCase() || "";
-        } else if (sortConfig.key === "tenant_dept") {
-          aValue =
-            (a.tenant?.name || a.tenantSlug || "").toLowerCase() +
-            (a.department || "").toLowerCase();
-          bValue =
-            (b.tenant?.name || b.tenantSlug || "").toLowerCase() +
-            (b.department || "").toLowerCase();
-        } else {
-          aValue = (a as Record<string, unknown>)[sortConfig.key] as
-            | string
-            | number
-            | boolean;
-          bValue = (b as Record<string, unknown>)[sortConfig.key] as
-            | string
-            | number
-            | boolean;
-        }
-
-        if (aValue === bValue) return 0;
-        if (aValue === null || aValue === undefined) return 1;
-        if (bValue === null || bValue === undefined) return -1;
-
-        if (sortConfig.direction === "asc") {
-          return aValue < bValue ? -1 : 1;
-        }
-        return aValue > bValue ? -1 : 1;
-      });
-    }
-    return sorted;
-  }, [rawItems, sortConfig]);
-
-  const requestSort = (key: SortConfig["key"]) => {
-    let direction: "asc" | "desc" = "asc";
-    if (
-      sortConfig &&
-      sortConfig.key === key &&
-      sortConfig.direction === "asc"
-    ) {
-      direction = "desc";
-    }
-    setSortConfig({ key, direction });
+  const requestSort = (key: UserSortKey) => {
+    setSortConfig((current) => toggleSort(current, key));
   };
 
-  const getSortIcon = (key: SortConfig["key"]) => {
+  const getSortIcon = (key: UserSortKey) => {
     if (!sortConfig || sortConfig.key !== key) {
       return <ArrowUpDown size={14} className="ml-1 opacity-50" />;
     }