修复(#22): 收口后台订单状态6退款入口

apps/admin/public/assets/locales/en-US/dashboard.json

@@ -29,6 +29,5 @@
   "users": "Users",
   "userTitle": "User Statistics",
   "userTraffic": "User Traffic",
-  "withdrawalManagement": "Withdrawal Management",
   "yesterday": "Yesterday"
 }

apps/admin/public/assets/locales/en-US/order.json

@@ -16,10 +16,11 @@
     "0": "Status",
     "1": "Pending",
     "2": "Paid",
-    "3": "Cancelled",
+    "3": "Closed",
-    "4": "Closed",
+    "4": "Failed",
-    "5": "Completed",
+    "5": "Finished",
-    "6": "Refunded"
+    "6": "Claimed",
+    "7": "Refunded"
   },
   "subscribe": "Subscribe",
   "subscribePrice": "Subscription Price",
@@ -33,5 +34,8 @@
     "4": "Recharge"
   },
   "updateTime": "Update Time",
-  "user": "User"
+  "user": "User",
+  "refundFailed": "Refund failed. Please try again.",
+  "statusClaimedBlocked": "Claimed and refunded states must use the dedicated processing flow.",
+  "statusUpdateFailed": "Status update failed. Please try again."
 }

apps/admin/public/assets/locales/en-US/user.json

@@ -100,12 +100,10 @@
   "manager": "Administrator",
   "memberCount": "Member Count",
   "more": "More",
-  "neverLoggedIn": "Never logged in",
   "normal": "Normal",
   "next": "Next",
   "noInvitedUsers": "No invited users yet",
   "notifySettingsTitle": "Notify Settings",
-  "inactive": "Inactive",
   "offline": "Offline",
   "online": "Online",
   "onlineDevices": "Online Devices",
@@ -191,7 +189,6 @@
   "groupUpdated": "Group updated successfully",
   "upload": "Upload",
   "uploadTraffic": "Upload Traffic",
-  "userStatus": "User Status",
   "userAgent": "User Agent",
   "userEmail": "Email",
   "userEmailPlaceholder": "Enter email",
@@ -201,7 +198,6 @@
   "userName": "Username",
   "userProfile": "User Profile",
   "userGroup": "User Group",
-  "active": "Active",
   "verified": "Verified",
   "viewDeviceGroup": "View Device Group",
   "viewOwner": "View Owner",

apps/admin/public/assets/locales/zh-CN/dashboard.json

@@ -29,6 +29,5 @@
   "users": "用户",
   "userTitle": "用户统计",
   "userTraffic": "用户流量",
-  "withdrawalManagement": "提现管理",
   "yesterday": "昨日"
 }

apps/admin/public/assets/locales/zh-CN/order.json

@@ -16,10 +16,11 @@
     "0": "状态",
     "1": "待支付",
     "2": "已支付",
-    "3": "已取消",
+    "3": "已关闭",
-    "4": "已关闭",
+    "4": "失败",
     "5": "已完成",
-    "6": "已退费"
+    "6": "处理中",
+    "7": "已退费"
   },
   "subscribe": "订阅",
   "subscribePrice": "订阅价格",
@@ -33,5 +34,8 @@
     "4": "充值"
   },
   "updateTime": "更新时间",
-  "user": "用户"
+  "user": "用户",
+  "refundFailed": "退费失败，请重试。",
+  "statusClaimedBlocked": "处理中和已退费状态必须走专用流程，不能通过通用改状态提交。",
+  "statusUpdateFailed": "状态更新失败，请重试。"
 }

apps/admin/public/assets/locales/zh-CN/user.json

@@ -101,12 +101,10 @@
   "manager": "管理员",
   "memberCount": "成员数量",
   "more": "更多",
-  "neverLoggedIn": "从未登录",
   "normal": "正常",
   "next": "下一页",
   "noInvitedUsers": "暂无邀请用户",
   "notifySettingsTitle": "通知设置",
-  "inactive": "未活跃",
   "offline": "离线",
   "online": "在线",
   "onlineDevices": "在线设备",
@@ -192,7 +190,6 @@
   "groupUpdated": "分组更新成功",
   "upload": "上传",
   "uploadTraffic": "上传流量",
-  "userStatus": "用户状态",
   "userAgent": "用户代理",
   "userEmail": "邮箱",
   "userEmailPlaceholder": "输入邮箱",
@@ -202,7 +199,6 @@
   "userName": "用户名",
   "userProfile": "用户资料",
   "userGroup": "用户分组",
-  "active": "活跃",
   "verified": "已验证",
   "viewDeviceGroup": "查看设备组",
   "viewOwner": "查看所有者",

apps/admin/src/sections/dashboard/components/statistics.tsx

@@ -241,11 +241,11 @@ export default function Statistics() {
             iconBg: "bg-green-100 dark:bg-green-900/30",
           },
           {
-            title: t("withdrawalManagement", "提现管理"),
+            title: t("pendingTickets", "Pending Tickets"),
             value: TicketTotal || 0,
             subtitle: t("pending", "Pending"),
             icon: "uil:clipboard-notes",
-            href: "/dashboard/withdrawal",
+            href: "/dashboard/ticket",
             color: "text-red-600 dark:text-red-400",
             iconBg: "bg-red-100 dark:bg-red-900/30",
           },

apps/admin/src/sections/order/index.test.tsx

@@ -0,0 +1,466 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import {
+  activateOrder,
+  getOrderList,
+  refundOrder,
+  updateOrderStatus,
+} from "@workspace/ui/services/admin/order";
+import type { AxiosResponse } from "axios";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import Order, { canManuallyUpdateOrderStatus, canRefundOrderStatus } from ".";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback: string): string => fallback,
+  }),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  useSearch: () => ({}),
+}));
+
+vi.mock("@/stores/global", () => ({
+  useGlobalStore: (
+    selector?: (state: {
+      user: { is_admin: boolean };
+      common: { currency: { currency_symbol: string } };
+    }) => unknown
+  ) => {
+    const state = {
+      user: {
+        is_admin: true,
+      },
+      common: {
+        currency: {
+          currency_symbol: "$",
+        },
+      },
+    };
+
+    return typeof selector === "function" ? selector(state) : state;
+  },
+}));
+
+vi.mock("@/stores/subscribe", () => ({
+  useSubscribe: () => ({
+    subscribes: [
+      {
+        id: 9,
+        name: "Pro Plan",
+      },
+    ],
+    getSubscribeName: (id?: number) => (id === 9 ? "Pro Plan" : "--"),
+  }),
+}));
+
+vi.mock("@/utils/common", () => ({
+  formatDate: (timestamp: number) => `date-${timestamp}`,
+}));
+
+vi.mock("../user/user-detail", () => ({
+  UserDetail: ({ id }: { id: number }) => <span>User #{id}</span>,
+}));
+
+vi.mock("@/components/display", () => ({
+  Display: ({ value }: { value: number }) => <span>{value}</span>,
+}));
+
+const toastSuccess = vi.fn();
+const toastError = vi.fn();
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: (...args: unknown[]) => toastSuccess(...args),
+    error: (...args: unknown[]) => toastError(...args),
+  },
+}));
+
+vi.mock("@workspace/ui/services/admin/order", () => ({
+  activateOrder: vi.fn(),
+  getOrderList: vi.fn(),
+  refundOrder: vi.fn(),
+  updateOrderStatus: vi.fn(),
+}));
+
+vi.mock("@workspace/ui/components/alert-dialog", () => ({
+  AlertDialog: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogTrigger: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogFooter: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  AlertDialogCancel: ({
+    children,
+    ...props
+  }: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
+  AlertDialogAction: ({
+    children,
+    ...props
+  }: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
+}));
+
+vi.mock("@workspace/ui/composed/combobox", () => ({
+  Combobox: ({
+    options = [],
+    value,
+    onChange,
+    placeholder,
+  }: {
+    options?: Array<{ label: string; value: number | string }>;
+    value?: number | string;
+    onChange: (value: number) => void;
+    placeholder?: string;
+  }) => (
+    <label>
+      <span>{placeholder}</span>
+      <select
+        aria-label={placeholder}
+        onChange={(event) => onChange(Number(event.target.value))}
+        value={String(value ?? "")}
+      >
+        {options.map((option) => (
+          <option key={String(option.value)} value={String(option.value)}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  ),
+}));
+
+vi.mock("@workspace/ui/composed/pro-table/pro-table", async () => {
+  const React = await import("react");
+
+  type Column = {
+    accessorKey?: string;
+    cell?: (props: {
+      row: {
+        original: Record<string, unknown>;
+        getValue: (key: string) => unknown;
+      };
+    }) => React.ReactNode;
+  };
+
+  return {
+    ProTable: ({
+      columns,
+      request,
+      actions,
+    }: {
+      columns: Column[];
+      request: (
+        pagination: { page: number; size: number },
+        filter: Record<string, unknown>
+      ) => Promise<{ list: Record<string, unknown>[]; total: number }>;
+      actions?: {
+        render?: (row: Record<string, unknown>) => React.ReactNode[];
+      };
+    }) => {
+      const [state, setState] = React.useState<{
+        data: Record<string, unknown>[];
+        error: boolean;
+        loading: boolean;
+      }>({
+        data: [],
+        error: false,
+        loading: true,
+      });
+
+      React.useEffect(() => {
+        let cancelled = false;
+        request({ page: 1, size: 200 }, {})
+          .then((response) => {
+            if (cancelled) return;
+            setState({
+              data: response.list,
+              error: false,
+              loading: false,
+            });
+          })
+          .catch(() => {
+            if (cancelled) return;
+            setState({
+              data: [],
+              error: true,
+              loading: false,
+            });
+          });
+
+        return () => {
+          cancelled = true;
+        };
+      }, [request]);
+
+      if (state.loading) {
+        return <div aria-label="Loading data" role="status" />;
+      }
+
+      if (state.error) {
+        return <div>Failed to load orders</div>;
+      }
+
+      if (state.data.length === 0) {
+        return <div>No orders</div>;
+      }
+
+      return (
+        <div>
+          {state.data.map((row) => (
+            <article key={String(row.id)}>
+              {columns.map((column, index) => {
+                const value = column.accessorKey
+                  ? row[column.accessorKey]
+                  : undefined;
+                const rowApi = {
+                  original: row,
+                  getValue: (key: string) => row[key],
+                };
+
+                return (
+                  <div key={`${row.id}-${index}`}>
+                    {column.cell
+                      ? column.cell({ row: rowApi })
+                      : typeof value === "object"
+                        ? JSON.stringify(value)
+                        : String(value ?? "")}
+                  </div>
+                );
+              })}
+              <div>{actions?.render?.(row)}</div>
+            </article>
+          ))}
+        </div>
+      );
+    },
+  };
+});
+
+const mockedGetOrderList = vi.mocked(getOrderList);
+const mockedRefundOrder = vi.mocked(refundOrder);
+const mockedUpdateOrderStatus = vi.mocked(updateOrderStatus);
+const mockedActivateOrder = vi.mocked(activateOrder);
+
+function createOrderListResponse(
+  list: API.Order[]
+): AxiosResponse<API.Response & { data?: API.GetOrderListResponse }> {
+  return {
+    data: {
+      code: 200,
+      data: {
+        list,
+        total: list.length,
+      },
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+function createSuccessResponse(): AxiosResponse<
+  API.Response & { data?: unknown }
+> {
+  return {
+    data: {
+      code: 200,
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+function createOrder(status: number): API.Order {
+  return {
+    id: status,
+    amount: 1999,
+    coupon_discount: 0,
+    discount: 0,
+    fee_amount: 0,
+    order_no: `ORDER-${status}`,
+    payment: {
+      name: "Stripe",
+      platform: "stripe",
+    },
+    price: 1999,
+    quantity: 1,
+    status,
+    status_name:
+      status === 6 ? "claimed" : status === 7 ? "refunded" : "pending",
+    subscribe_id: 9,
+    trade_no: `TRADE-${status}`,
+    type: 1,
+    updated_at: 1_716_800_000,
+    user_id: 88,
+  } as API.Order;
+}
+
+function renderOrderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <Order />
+    </QueryClientProvider>
+  );
+}
+
+beforeEach(() => {
+  localStorage.setItem("timezone", "UTC");
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("Order", () => {
+  it("uses the dedicated refund endpoint for refundable orders", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(2)])
+    );
+    mockedRefundOrder.mockResolvedValue(createSuccessResponse());
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-2")).not.toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
+
+    await waitFor(() =>
+      expect(mockedRefundOrder).toHaveBeenCalledWith(
+        { id: 2 },
+        { skipErrorHandler: true }
+      )
+    );
+    expect(toastSuccess).toHaveBeenCalledWith("Refund completed.");
+  });
+
+  it("blocks status 6 and 7 from the generic status editor", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(1)])
+    );
+    mockedUpdateOrderStatus.mockResolvedValue(createSuccessResponse());
+
+    renderOrderPage();
+
+    const statusSelect = await screen.findByLabelText("Status");
+    const optionValues = Array.from(
+      statusSelect.querySelectorAll("option")
+    ).map((option) => option.textContent);
+
+    expect(optionValues).not.toContain("Claimed");
+    expect(optionValues).not.toContain("Refunded");
+    expect(canManuallyUpdateOrderStatus(6)).toBe(false);
+    expect(canManuallyUpdateOrderStatus(7)).toBe(false);
+
+    fireEvent.change(statusSelect, { target: { value: "2" } });
+
+    await waitFor(() =>
+      expect(mockedUpdateOrderStatus).toHaveBeenCalledWith(
+        { id: 1, status: 2 },
+        { skipErrorHandler: true }
+      )
+    );
+  });
+
+  it("renders loading state while orders are being fetched", () => {
+    mockedGetOrderList.mockReturnValue(
+      new Promise(() => {
+        // Keep the request pending so the loading UI remains visible.
+      }) as ReturnType<typeof getOrderList>
+    );
+
+    renderOrderPage();
+
+    expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
+  });
+
+  it("renders the empty state when there are no orders", async () => {
+    mockedGetOrderList.mockResolvedValue(createOrderListResponse([]));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("No orders")).not.toBeNull();
+  });
+
+  it("shows an error toast when refund fails", async () => {
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(5)])
+    );
+    mockedRefundOrder.mockRejectedValue(new Error("refund failed"));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-5")).not.toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
+
+    await waitFor(() =>
+      expect(toastError).toHaveBeenCalledWith(
+        "Refund failed. Please try again."
+      )
+    );
+  });
+
+  it("renders the error state when the order list request fails", async () => {
+    mockedGetOrderList.mockRejectedValue(new Error("network failed"));
+
+    renderOrderPage();
+
+    expect(await screen.findByText("Failed to load orders")).not.toBeNull();
+  });
+
+  it("keeps the order actions visible on a narrow viewport", async () => {
+    window.innerWidth = 375;
+    window.dispatchEvent(new Event("resize"));
+    mockedGetOrderList.mockResolvedValue(
+      createOrderListResponse([createOrder(2), createOrder(6), createOrder(7)])
+    );
+
+    renderOrderPage();
+
+    expect(await screen.findByText("ORDER-2")).not.toBeNull();
+    expect(screen.getByText("Claimed")).not.toBeNull();
+    expect(screen.getAllByText("Refund").length).toBe(1);
+    expect(canRefundOrderStatus(2)).toBe(true);
+    expect(canRefundOrderStatus(6)).toBe(false);
+    expect(canRefundOrderStatus(7)).toBe(false);
+    expect(mockedActivateOrder).not.toHaveBeenCalled();
+  });
+});

apps/admin/src/sections/order/index.tsx

@@ -40,7 +40,31 @@ import { useSubscribe } from "@/stores/subscribe";
 import { formatDate } from "@/utils/common";
 import { UserDetail } from "../user/user-detail";
 
-const REFUNDED_ORDER_STATUS = 6;
+const ORDER_STATUS_PENDING = 1;
+const ORDER_STATUS_PAID = 2;
+const ORDER_STATUS_CLOSED = 3;
+const ORDER_STATUS_FAILED = 4;
+const ORDER_STATUS_FINISHED = 5;
+const ORDER_STATUS_CLAIMED = 6;
+const ORDER_STATUS_REFUNDED = 7;
+
+const MANUALLY_EDITABLE_ORDER_STATUSES = [
+  ORDER_STATUS_PENDING,
+  ORDER_STATUS_PAID,
+  ORDER_STATUS_CLOSED,
+  ORDER_STATUS_FAILED,
+  ORDER_STATUS_FINISHED,
+] as const;
+
+export function canManuallyUpdateOrderStatus(status: number) {
+  return MANUALLY_EDITABLE_ORDER_STATUSES.includes(
+    status as (typeof MANUALLY_EDITABLE_ORDER_STATUSES)[number]
+  );
+}
+
+export function canRefundOrderStatus(status: number) {
+  return [ORDER_STATUS_PAID, ORDER_STATUS_FINISHED].includes(status);
+}
 
 export default function Order() {
   const { t } = useTranslation("order");
@@ -56,30 +80,46 @@ export default function Order() {
     subscribe_id: sp.subscribe_id || undefined,
   };
 
-  const statusOptions = [
+  const displayStatusOptions = [
     {
-      value: 1,
+      value: ORDER_STATUS_PENDING,
       label: t("status.1", "Pending"),
       className: "bg-orange-500",
     },
-    { value: 2, label: t("status.2", "Paid"), className: "bg-green-500" },
     {
-      value: 3,
+      value: ORDER_STATUS_PAID,
-      label: t("status.3", "Cancelled"),
+      label: t("status.2", "Paid"),
-      className: "bg-gray-500",
-    },
-    { value: 4, label: t("status.4", "Closed"), className: "bg-red-500" },
-    {
-      value: 5,
-      label: t("status.5", "Completed"),
       className: "bg-green-500",
     },
     {
-      value: REFUNDED_ORDER_STATUS,
+      value: ORDER_STATUS_CLOSED,
-      label: t("status.6", "Refunded"),
+      label: t("status.3", "Closed"),
+      className: "bg-gray-500",
+    },
+    {
+      value: ORDER_STATUS_FAILED,
+      label: t("status.4", "Failed"),
+      className: "bg-red-500",
+    },
+    {
+      value: ORDER_STATUS_FINISHED,
+      label: t("status.5", "Finished"),
+      className: "bg-green-500",
+    },
+    {
+      value: ORDER_STATUS_CLAIMED,
+      label: t("status.6", "Claimed"),
+      className: "bg-amber-500",
+    },
+    {
+      value: ORDER_STATUS_REFUNDED,
+      label: t("status.7", "Refunded"),
       className: "bg-red-500",
     },
   ];
+  const editableStatusOptions = displayStatusOptions.filter((option) =>
+    canManuallyUpdateOrderStatus(option.value)
+  );
 
   const typeOptions = [
     { value: 1, label: t("type.1", "New Purchase") },
@@ -95,29 +135,36 @@ export default function Order() {
 
   const refundMutation = useMutation({
     mutationFn: async (order: API.Order) => {
-      await refundOrder({ id: order.id });
+      await refundOrder(
+        { id: order.id },
+        {
+          skipErrorHandler: true,
+        }
+      );
     },
     onSuccess: () => {
       toast.success(t("refundSuccess", "Refund completed."));
       setConfirmingOrderId(null);
       ref.current?.refresh();
     },
-    onError: (error) => {
+    onError: () => {
-      console.error("Refund order failed", error);
+      toast.error(t("refundFailed", "Refund failed. Please try again."));
       setConfirmingOrderId(null);
     },
   });
 
   const isRefundedOrder = (order: API.Order) =>
-    order.status === REFUNDED_ORDER_STATUS ||
+    order.status === ORDER_STATUS_REFUNDED ||
-    order.status_name === t("status.6", "Refunded") ||
+    order.status_name === t("status.7", "Refunded") ||
     order.status_name?.toLowerCase() === "refunded";
 
   const canRefundOrder = (order: API.Order) =>
-    canRefundOrders && !isRefundedOrder(order);
+    canRefundOrders &&
+    canRefundOrderStatus(order.status) &&
+    !isRefundedOrder(order);
 
   return (
-    <ProTable<API.Order, any>
+    <ProTable<API.Order, Record<string, unknown>>
       action={ref}
       actions={{
         render: (order) => {
@@ -173,7 +220,11 @@ export default function Order() {
                     onClick={async (event) => {
                       event.preventDefault();
                       if (isPending) return;
+                      try {
                         await refundMutation.mutateAsync(order);
+                      } catch {
+                        // Errors are surfaced through the mutation onError handler.
+                      }
                     }}
                   >
                     {isPending
@@ -335,26 +386,55 @@ export default function Order() {
           header: t("status.0", "Status"),
           cell: ({ row }) => {
             const order = row.original as API.Order;
-            const option = statusOptions.find(
+            const option = displayStatusOptions.find(
               (opt) => opt.value === order.status
             );
-            if ([1, 3, 4].includes(row.getValue("status"))) {
+            if (
+              [ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED, ORDER_STATUS_FAILED]
+                .map(String)
+                .includes(String(row.getValue("status")))
+            ) {
               return (
                 <div className="flex items-center gap-1">
                   <Combobox<number, false>
                     className={cn(option?.className)}
                     onChange={async (value) => {
-                      await updateOrderStatus({
+                      if (!canManuallyUpdateOrderStatus(value)) {
+                        toast.error(
+                          t(
+                            "statusClaimedBlocked",
+                            "Claimed and refunded states must use the dedicated processing flow."
+                          )
+                        );
+                        return;
+                      }
+                      try {
+                        await updateOrderStatus(
+                          {
                             id: order.id,
                             status: value,
-                      });
+                          },
+                          {
+                            skipErrorHandler: true,
+                          }
+                        );
                         ref.current?.refresh();
+                      } catch {
+                        toast.error(
+                          t(
+                            "statusUpdateFailed",
+                            "Status update failed. Please try again."
+                          )
+                        );
+                      }
                     }}
-                    options={statusOptions}
+                    options={editableStatusOptions}
                     placeholder={t("status.0", "Status")}
                     value={order.status}
                   />
-                  {[1, 3].includes(order.status) && (
+                  {[ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED].includes(
+                    order.status
+                  ) && (
                     <Button
                       onClick={async () => {
                         await activateOrder({ order_no: order.order_no });
@@ -387,7 +467,7 @@ export default function Order() {
         {
           key: "status",
           placeholder: t("status.0", "Status"),
-          options: statusOptions.map((item) => ({
+          options: displayStatusOptions.map((item) => ({
             label: item.label,
             value: String(item.value),
           })),

apps/admin/src/sections/user/index.tsx

@@ -1,25 +1,34 @@
 import { useQuery } from "@tanstack/react-query";
 import { Link, useSearch } from "@tanstack/react-router";
+import { Badge } from "@workspace/ui/components/badge";
 import { Button } from "@workspace/ui/components/button";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@workspace/ui/components/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@workspace/ui/components/dropdown-menu";
+import { Input } from "@workspace/ui/components/input";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@workspace/ui/components/popover";
 import { ScrollArea } from "@workspace/ui/components/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select";
 import {
   Sheet,
   SheetContent,
@@ -34,12 +43,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "@workspace/ui/components/tabs";
-import {
+import { Combobox } from "@workspace/ui/composed/combobox";
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@workspace/ui/components/tooltip";
 // import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
 import {
   ProTable,
@@ -56,8 +60,9 @@ import {
   getUserList,
   updateUserBasicInfo,
 } from "@workspace/ui/services/admin/user";
+import { parseDeviceType } from "@workspace/ui/utils/device";
 import { FilePenLine } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { Display } from "@/components/display";
@@ -68,16 +73,18 @@ import { RemarkForm } from "./remark-form";
 import { buildUserBasicInfoPayload } from "./user-basic-info-payload";
 import { UserDetail } from "./user-detail";
 import UserForm from "./user-form";
-import { UserIdentifier } from "./user-identifier";
 import { UserInviteStatsSheet } from "./user-invite-stats-sheet";
 import { AuthMethodsForm } from "./user-profile/auth-methods-form";
 import { BasicInfoForm } from "./user-profile/basic-info-form";
 import { NotifySettingsForm } from "./user-profile/notify-settings-form";
-import { UserSearchBar } from "./user-search-bar";
 import UserSubscription from "./user-subscription";
 
 // import EditUserGroupDialog from "./edit-user-group-dialog";
 
+type UserDeviceWithDeviceNo = API.UserDevice & {
+  device_no?: string;
+};
+
 export default function User() {
   const { t } = useTranslation("user");
   const [loading, setLoading] = useState(false);
@@ -91,14 +98,6 @@ export default function User() {
     value: sp.search || sp.user_id || "",
   });
 
-  useEffect(() => {
-    searchRef.current = {
-      type: sp.user_id ? "user_id" : "email",
-      value: sp.search || sp.user_id || "",
-    };
-    ref.current?.refresh();
-  }, [sp.search, sp.user_id]);
-
   const handleSearch = useCallback((type: string, value: string) => {
     searchRef.current = { type, value };
     ref.current?.refresh();
@@ -152,6 +151,7 @@ export default function User() {
             onChanged={() => ref.current?.refresh()}
             userId={row.id}
           />,
+          <PreviewNodesDialog key="preview-nodes" userId={row.id} />,
           /* <ConfirmButton
             cancelText={t("cancel", "Cancel")}
             confirmText={t("confirm", "Confirm")}
@@ -176,8 +176,6 @@ export default function User() {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <InviteStatsMenuItem userId={row.id} />
-              <PreviewNodesMenuItem userId={row.id} />
-              <DropdownMenuSeparator />
               <DropdownMenuItem asChild>
                 <Link search={{ user_id: row.id }} to="/dashboard/order">
                   {t("orderList", "Order List")}
@@ -264,12 +262,30 @@ export default function User() {
           id: "auth_methods",
           accessorKey: "auth_methods",
           header: "设备码/邮箱",
-          cell: ({ row }) => (
+          cell: ({ row }) => {
+            const method = row.original.auth_methods?.[0];
+            const identifier = method?.auth_identifier || "";
+            const isDevice = method?.auth_type === "device";
+            const firstDevice = row.original.user_devices?.[0] as
+              | UserDeviceWithDeviceNo
+              | undefined;
+            const deviceNo = firstDevice?.device_no;
+            const deviceType = parseDeviceType(firstDevice?.user_agent || "");
+            const display = isDevice ? deviceNo || identifier : identifier;
+            return (
               <div className="flex items-center">
-              <UserIdentifier
+                {/* <Badge
-                className="flex items-center"
+                  className="mr-1 uppercase"
-                user={row.original}
+                  title={method?.verified ? t("verified", "Verified") : ""}
-              />
+                >
+                  {method?.auth_type}
+                </Badge>*/}
+                {deviceType && (
+                  <Badge className="mr-1" variant="secondary">
+                    {deviceType}
+                  </Badge>
+                )}
+                <span title={isDevice ? display : undefined}>{display}</span>
                 <Popover>
                   <PopoverTrigger>
                     <div className={"flex items-center"}>
@@ -300,7 +316,8 @@ export default function User() {
                   </PopoverContent>
                 </Popover>
               </div>
-          ),
+            );
+          },
         },
         /* {
           id: "balance",
@@ -338,48 +355,6 @@ export default function User() {
           header: t("referer", "Referer"),
           cell: ({ row }) => <UserDetail id={row.original.referer_id} />,
         },
-        {
-          id: "last_login_time",
-          accessorKey: "last_login_time",
-          header: t("userStatus", "用户状态"),
-          cell: ({ row }) => {
-            const lastLoginTime = (
-              row.original as API.User & {
-                last_login_time?: number;
-              }
-            ).last_login_time;
-            const isOnline = Boolean(lastLoginTime);
-            const dotClassName = isOnline ? "bg-green-500" : "bg-gray-400";
-            const statusLabel = isOnline
-              ? t("active", "Active")
-              : t("inactive", "Inactive");
-
-            return (
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <div className="inline-flex items-center gap-2">
-                      <span
-                        aria-hidden="true"
-                        className={`h-2.5 w-2.5 rounded-full ${dotClassName}`}
-                      />
-                      <span className="sr-only">
-                        {isOnline
-                          ? `${statusLabel}: ${formatDate(lastLoginTime)}`
-                          : statusLabel}
-                      </span>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {isOnline
-                      ? formatDate(lastLoginTime)
-                      : t("neverLoggedIn", "Never logged in")}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            );
-          },
-        },
         {
           id: "created_at",
           accessorKey: "created_at",
@@ -548,25 +523,6 @@ function InviteStatsMenuItem({ userId }: { userId: number }) {
   );
 }
 
-function PreviewNodesMenuItem({ userId }: { userId: number }) {
-  const { t } = useTranslation("user");
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <DropdownMenuItem
-        onSelect={(e) => {
-          e.preventDefault();
-          setOpen(true);
-        }}
-      >
-        {t("previewNodes", "Preview Nodes")}
-      </DropdownMenuItem>
-      <PreviewNodesDialog onOpenChange={setOpen} open={open} userId={userId} />
-    </>
-  );
-}
-
 function DeviceGroupSheet({
   userId,
   onChanged,
@@ -595,16 +551,92 @@ function DeviceGroupSheet({
   );
 }
 
-function PreviewNodesDialog({
+function UserSearchBar({
-  userId,
+  initialType,
-  open,
+  initialValue,
-  onOpenChange,
+  onSearch,
+  subscribes,
 }: {
-  userId: number;
+  initialType: string;
-  open: boolean;
+  initialValue: string;
-  onOpenChange: (open: boolean) => void;
+  onSearch: (type: string, value: string) => void;
+  subscribes?: API.SubscribeItem[];
 }) {
   const { t } = useTranslation("user");
+  const [searchType, setSearchType] = useState(initialType);
+  const [searchValue, setSearchValue] = useState(initialValue);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select
+        onValueChange={(v) => {
+          setSearchType(v);
+          setSearchValue("");
+        }}
+        value={searchType}
+      >
+        <SelectTrigger className="w-48">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="email">设备码/邮箱</SelectItem>
+          <SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
+          <SelectItem value="subscribe_id">
+            {t("subscription", "Subscription")}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      {searchType === "subscribe_id" ? (
+        <Combobox
+          className="w-48"
+          onChange={(value) => {
+            setSearchValue(value);
+            onSearch("subscribe_id", value);
+          }}
+          options={subscribes?.map((item) => ({
+            label: item.name!,
+            value: String(item.id!),
+          }))}
+          placeholder={t("subscription", "Subscription")}
+          value={searchValue}
+        />
+      ) : (
+        <>
+          <Input
+            className="w-48"
+            onChange={(e) => setSearchValue(e.target.value)}
+            onKeyDown={(e) =>
+              e.key === "Enter" && onSearch(searchType, searchValue)
+            }
+            placeholder={t("searchInputPlaceholder", "Enter search term")}
+            value={searchValue}
+          />
+          <Button
+            onClick={() => onSearch(searchType, searchValue)}
+            variant="default"
+          >
+            {t("search", "Search")}
+          </Button>
+          {searchValue && (
+            <Button
+              onClick={() => {
+                setSearchValue("");
+                onSearch(searchType, "");
+              }}
+              variant="outline"
+            >
+              {t("resetSearch", "Reset")}
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function PreviewNodesDialog({ userId }: { userId: number }) {
+  const { t } = useTranslation("user");
+  const [open, setOpen] = useState(false);
   const { data: previewData, isLoading } = useQuery({
     enabled: open,
     queryKey: ["previewUserNodes", userId],
@@ -615,7 +647,10 @@ function PreviewNodesDialog({
   });
 
   return (
-    <Dialog onOpenChange={onOpenChange} open={open}>
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger asChild>
+        <Button variant="outline">{t("previewNodes", "Preview Nodes")}</Button>
+      </DialogTrigger>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>

apps/admin/src/sections/user/user-detail.tsx

@@ -16,7 +16,6 @@ import { formatBytes } from "@workspace/ui/utils/formatting";
 import { useTranslation } from "react-i18next";
 import { Display } from "@/components/display";
 import { formatDate } from "@/utils/common";
-import { UserIdentifier } from "./user-identifier";
 // import EditUserGroupDialog from "./edit-user-group-dialog";
 // import { getUserGroupList } from "@workspace/ui/services/admin/group";
 
@@ -230,13 +229,26 @@ export function UserDetail({ id }: { id: number }) {
 
   if (!id) return "--";
 
+  const firstMethod = data?.auth_methods[0];
+  const isDevice = firstMethod?.auth_type === "device";
+  const deviceNo = (data as any)?.user_devices?.[0]?.device_no;
+  const rawIdentifier = firstMethod?.auth_identifier || "";
+  const identifier = isDevice ? deviceNo || rawIdentifier : rawIdentifier;
+
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
         <Button asChild className="p-0" variant="link">
           <Link search={{ user_id: id }} to="/dashboard/user">
             {data ? (
-              <UserIdentifier className="flex items-center" user={data} />
+              <>
+                {firstMethod && (
+                  <span className="mr-1 inline-flex items-center rounded border px-1 py-0.5 font-mono text-xs uppercase">
+                    {firstMethod.auth_type}
+                  </span>
+                )}
+                {identifier}
+              </>
             ) : (
               t("loading", "Loading...")
             )}

apps/admin/src/sections/user/user-identifier.test.tsx

@@ -1,101 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
-import { getUserIdentifierParts, UserIdentifier } from "./user-identifier";
-
-afterEach(() => {
-  cleanup();
-});
-
-type DeviceWithOptionalNo = API.UserDevice & { device_no?: string };
-
-describe("getUserIdentifierParts", () => {
-  it("uses the device number and D label for device-auth users", () => {
-    expect(
-      getUserIdentifierParts({
-        auth_methods: [
-          {
-            auth_type: "device",
-            auth_identifier: "raw-device-id",
-            verified: true,
-          },
-        ],
-        user_devices: [
-          {
-            id: 1,
-            ip: "127.0.0.1",
-            identifier: "device-id",
-            user_agent:
-              "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)",
-            online: true,
-            enabled: true,
-            created_at: 0,
-            updated_at: 0,
-            device_no: "DVC-001",
-          } satisfies DeviceWithOptionalNo,
-        ],
-      })
-    ).toMatchObject({
-      authLabel: "(D)",
-      identifier: "DVC-001",
-      isDevice: true,
-    });
-  });
-
-  it("falls back to the raw identifier and E label for email-auth users", () => {
-    expect(
-      getUserIdentifierParts({
-        auth_methods: [
-          {
-            auth_type: "email",
-            auth_identifier: "user@example.com",
-            verified: true,
-          },
-        ],
-        user_devices: [],
-      })
-    ).toMatchObject({
-      authLabel: "(E)",
-      identifier: "user@example.com",
-      isDevice: false,
-    });
-  });
-});
-
-describe("UserIdentifier", () => {
-  it("renders the compact auth label and visible identifier", () => {
-    render(
-      <UserIdentifier
-        user={{
-          auth_methods: [
-            {
-              auth_type: "email",
-              auth_identifier: "referrer@example.com",
-              verified: true,
-            },
-          ],
-          user_devices: [],
-        }}
-      />
-    );
-
-    expect(screen.getByText("(E)")).not.toBeNull();
-    expect(screen.getByText("referrer@example.com")).not.toBeNull();
-  });
-
-  it("renders an empty fallback when no identifier is available", () => {
-    render(
-      <UserIdentifier
-        user={{
-          auth_methods: [],
-          user_devices: [],
-        }}
-      />
-    );
-
-    expect(screen.getByText("(E)")).not.toBeNull();
-    expect(screen.getByText("--")).not.toBeNull();
-  });
-});

apps/admin/src/sections/user/user-identifier.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { Badge } from "@workspace/ui/components/badge";
-import { parseDeviceType } from "@workspace/ui/utils/device";
-
-type UserDeviceWithDeviceNo = API.UserDevice & {
-  device_no?: string;
-};
-
-type UserIdentifierUser = {
-  auth_methods?: API.UserAuthMethod[];
-  user_devices?: UserDeviceWithDeviceNo[];
-};
-
-type UserIdentifierParts = {
-  authLabel: "(D)" | "(E)";
-  deviceBadge?: string;
-  identifier: string;
-  isDevice: boolean;
-};
-
-export function getUserIdentifierParts(
-  user?: UserIdentifierUser
-): UserIdentifierParts {
-  const method = user?.auth_methods?.[0];
-  const firstDevice = user?.user_devices?.[0] as
-    | UserDeviceWithDeviceNo
-    | undefined;
-  const isDevice = method?.auth_type === "device";
-  const rawIdentifier = method?.auth_identifier || "";
-  const identifier = isDevice
-    ? firstDevice?.device_no || rawIdentifier
-    : rawIdentifier;
-
-  return {
-    authLabel: isDevice ? "(D)" : "(E)",
-    deviceBadge: parseDeviceType(firstDevice?.user_agent || ""),
-    identifier,
-    isDevice,
-  };
-}
-
-export function UserIdentifier({
-  className,
-  user,
-}: {
-  className?: string;
-  user?: UserIdentifierUser;
-}) {
-  const { authLabel, deviceBadge, identifier, isDevice } =
-    getUserIdentifierParts(user);
-
-  return (
-    <div className={className}>
-      {deviceBadge ? (
-        <Badge className="mr-1" variant="secondary">
-          {deviceBadge}
-        </Badge>
-      ) : null}
-      <span className="mr-1 font-mono text-xs uppercase">{authLabel}</span>
-      <span title={isDevice ? identifier : undefined}>
-        {identifier || "--"}
-      </span>
-    </div>
-  );
-}

apps/admin/src/sections/user/user-search-bar.test.tsx

@@ -1,92 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { UserSearchBar } from "./user-search-bar";
-
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({
-    t: (_key: string, fallback: string): string => fallback,
-  }),
-}));
-
-afterEach(() => {
-  cleanup();
-});
-
-describe("UserSearchBar", () => {
-  it("keeps the controls usable on a narrow mobile viewport", () => {
-    Object.defineProperty(window, "innerWidth", {
-      configurable: true,
-      value: 390,
-    });
-
-    render(
-      <UserSearchBar
-        initialType="email"
-        initialValue=""
-        onSearch={vi.fn()}
-        subscribes={[]}
-      />
-    );
-
-    expect(screen.getByRole("combobox")).not.toBeNull();
-    expect(screen.getByRole("button", { name: "Search" })).not.toBeNull();
-  });
-
-  it("keeps the typed happy-path value and triggers search", () => {
-    const onSearch = vi.fn();
-
-    render(
-      <UserSearchBar
-        initialType="email"
-        initialValue=""
-        onSearch={onSearch}
-        subscribes={[]}
-      />
-    );
-
-    fireEvent.change(screen.getByPlaceholderText("Enter search term"), {
-      target: { value: "user@example.com" },
-    });
-    fireEvent.click(screen.getByRole("button", { name: "Search" }));
-
-    expect(onSearch).toHaveBeenCalledWith("email", "user@example.com");
-    expect(
-      (screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
-        .value
-    ).toBe("user@example.com");
-  });
-
-  it("syncs to external search changes for precise referrer navigation", () => {
-    const onSearch = vi.fn();
-    const { rerender } = render(
-      <UserSearchBar
-        initialType="email"
-        initialValue="old@example.com"
-        onSearch={onSearch}
-        subscribes={[]}
-      />
-    );
-
-    expect(
-      (screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
-        .value
-    ).toBe("old@example.com");
-
-    rerender(
-      <UserSearchBar
-        initialType="user_id"
-        initialValue="1024"
-        onSearch={onSearch}
-        subscribes={[]}
-      />
-    );
-
-    expect(
-      (screen.getByPlaceholderText("Enter search term") as HTMLInputElement)
-        .value
-    ).toBe("1024");
-  });
-});

apps/admin/src/sections/user/user-search-bar.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import { Button } from "@workspace/ui/components/button";
-import { Input } from "@workspace/ui/components/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@workspace/ui/components/select";
-import { Combobox } from "@workspace/ui/composed/combobox";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export function UserSearchBar({
-  initialType,
-  initialValue,
-  onSearch,
-  subscribes,
-}: {
-  initialType: string;
-  initialValue: string;
-  onSearch: (type: string, value: string) => void;
-  subscribes?: API.SubscribeItem[];
-}) {
-  const { t } = useTranslation("user");
-  const [searchType, setSearchType] = useState(initialType);
-  const [searchValue, setSearchValue] = useState(initialValue);
-
-  useEffect(() => {
-    setSearchType(initialType);
-    setSearchValue(initialValue);
-  }, [initialType, initialValue]);
-
-  return (
-    <div className="flex items-center gap-2">
-      <Select
-        onValueChange={(v) => {
-          setSearchType(v);
-          setSearchValue("");
-        }}
-        value={searchType}
-      >
-        <SelectTrigger className="w-48">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="email">设备码/邮箱</SelectItem>
-          <SelectItem value="user_id">{t("userId", "User ID")}</SelectItem>
-          <SelectItem value="subscribe_id">
-            {t("subscription", "Subscription")}
-          </SelectItem>
-        </SelectContent>
-      </Select>
-      {searchType === "subscribe_id" ? (
-        <Combobox
-          className="w-48"
-          onChange={(value) => {
-            setSearchValue(value);
-            onSearch("subscribe_id", value);
-          }}
-          options={subscribes?.map((item) => ({
-            label: item.name!,
-            value: String(item.id!),
-          }))}
-          placeholder={t("subscription", "Subscription")}
-          value={searchValue}
-        />
-      ) : (
-        <>
-          <Input
-            className="w-48"
-            onChange={(e) => setSearchValue(e.target.value)}
-            onKeyDown={(e) =>
-              e.key === "Enter" && onSearch(searchType, searchValue)
-            }
-            placeholder={t("searchInputPlaceholder", "Enter search term")}
-            value={searchValue}
-          />
-          <Button
-            onClick={() => onSearch(searchType, searchValue)}
-            variant="default"
-          >
-            {t("search", "Search")}
-          </Button>
-          {searchValue && (
-            <Button
-              onClick={() => {
-                setSearchValue("");
-                onSearch(searchType, "");
-              }}
-              variant="outline"
-            >
-              {t("resetSearch", "Reset")}
-            </Button>
-          )}
-        </>
-      )}
-    </div>
-  );
-}