修复(#97): 区分邀请管理加载失败状态

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

@@ -0,0 +1,23 @@
+{
+  "commission": "Commission",
+  "days": "{{count}} days",
+  "disabled": "Disabled",
+  "empty": "No invite records",
+  "enabled": "Enabled",
+  "hasPurchased": "Purchased",
+  "invitee": "Invitee",
+  "inviteeGiftDays": "Invitee Gift Days",
+  "inviteeId": "Invitee ID",
+  "invitedAt": "Invited At",
+  "inviter": "Inviter",
+  "inviterGiftDays": "Inviter Gift Days",
+  "inviterId": "Inviter ID",
+  "loadErrorDescription": "Refresh the table or try again later.",
+  "loadErrorTitle": "Failed to load invites",
+  "no": "No",
+  "orderCount": "Orders",
+  "searchPlaceholder": "Email or phone",
+  "status": "Status",
+  "title": "Invite Management",
+  "yes": "Yes"
+}

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

@@ -11,6 +11,7 @@
   "Email": "Email",
   "Gift": "Gift",
   "Group Management": "Group Management",
+  "Invite Management": "Invite Management",
   "Login": "Login",
   "Logs & Analytics": "Logs & Analytics",
   "Maintenance": "Maintenance",

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

@@ -0,0 +1,23 @@
+{
+  "commission": "佣金",
+  "days": "{{count}} 天",
+  "disabled": "禁用",
+  "empty": "暂无邀请记录",
+  "enabled": "启用",
+  "hasPurchased": "已购买",
+  "invitee": "被邀请人",
+  "inviteeGiftDays": "被邀请人赠送天数",
+  "inviteeId": "被邀请人 ID",
+  "invitedAt": "邀请时间",
+  "inviter": "邀请人",
+  "inviterGiftDays": "邀请人赠送天数",
+  "inviterId": "邀请人 ID",
+  "loadErrorDescription": "刷新表格或稍后重试。",
+  "loadErrorTitle": "邀请记录加载失败",
+  "no": "否",
+  "orderCount": "订单数",
+  "searchPlaceholder": "邮箱/手机号关键词",
+  "status": "状态",
+  "title": "邀请管理",
+  "yes": "是"
+}

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

@@ -11,6 +11,7 @@
   "Email": "邮件",
   "Gift": "赠送",
   "Group Management": "分组管理",
+  "Invite Management": "邀请管理",
   "Login": "登录",
   "Logs & Analytics": "日志与分析",
   "Maintenance": "维护",

apps/admin/src/layout/navs.ts

@@ -98,6 +98,11 @@ export function useNavs() {
             url: "/dashboard/withdrawal",
             icon: "flat-color-icons:money-transfer",
           },
+          {
+            title: t("Invite Management", "Invite Management"),
+            url: "/dashboard/invite-management",
+            icon: "flat-color-icons:add-user",
+          },
           {
             title: t("Device Group", "Device Group"),
             url: "/dashboard/family",

apps/admin/src/main.tsx

@@ -35,6 +35,7 @@ initializeI18n({
     "coupon",
     "dashboard",
     "document",
+    "invite",
     "log",
     "marketing",
     "menu",

apps/admin/src/routeTree.gen.ts

@@ -45,6 +45,9 @@ const DashboardOrderIndexLazyRouteImport =
 const DashboardMarketingIndexLazyRouteImport = createFileRoute(
   '/dashboard/marketing/',
 )()
+const DashboardInviteManagementIndexLazyRouteImport = createFileRoute(
+  '/dashboard/invite-management/',
+)()
 const DashboardGroupIndexLazyRouteImport =
   createFileRoute('/dashboard/group/')()
 const DashboardFamilyIndexLazyRouteImport =
@@ -214,6 +217,16 @@ const DashboardMarketingIndexLazyRoute =
   } as any).lazy(() =>
     import('./routes/dashboard/marketing/index.lazy').then((d) => d.Route),
   )
+const DashboardInviteManagementIndexLazyRoute =
+  DashboardInviteManagementIndexLazyRouteImport.update({
+    id: '/invite-management/',
+    path: '/invite-management/',
+    getParentRoute: () => DashboardRouteLazyRoute,
+  } as any).lazy(() =>
+    import('./routes/dashboard/invite-management/index.lazy').then(
+      (d) => d.Route,
+    ),
+  )
 const DashboardGroupIndexLazyRoute = DashboardGroupIndexLazyRouteImport.update({
   id: '/group/',
   path: '/group/',
@@ -388,6 +401,7 @@ export interface FileRoutesByFullPath {
   '/dashboard/document': typeof DashboardDocumentIndexLazyRoute
   '/dashboard/family': typeof DashboardFamilyIndexLazyRoute
   '/dashboard/group': typeof DashboardGroupIndexLazyRoute
+  '/dashboard/invite-management': typeof DashboardInviteManagementIndexLazyRoute
   '/dashboard/marketing': typeof DashboardMarketingIndexLazyRoute
   '/dashboard/order': typeof DashboardOrderIndexLazyRoute
   '/dashboard/payment': typeof DashboardPaymentIndexLazyRoute
@@ -423,6 +437,7 @@ export interface FileRoutesByTo {
   '/dashboard/document': typeof DashboardDocumentIndexLazyRoute
   '/dashboard/family': typeof DashboardFamilyIndexLazyRoute
   '/dashboard/group': typeof DashboardGroupIndexLazyRoute
+  '/dashboard/invite-management': typeof DashboardInviteManagementIndexLazyRoute
   '/dashboard/marketing': typeof DashboardMarketingIndexLazyRoute
   '/dashboard/order': typeof DashboardOrderIndexLazyRoute
   '/dashboard/payment': typeof DashboardPaymentIndexLazyRoute
@@ -461,6 +476,7 @@ export interface FileRoutesById {
   '/dashboard/document/': typeof DashboardDocumentIndexLazyRoute
   '/dashboard/family/': typeof DashboardFamilyIndexLazyRoute
   '/dashboard/group/': typeof DashboardGroupIndexLazyRoute
+  '/dashboard/invite-management/': typeof DashboardInviteManagementIndexLazyRoute
   '/dashboard/marketing/': typeof DashboardMarketingIndexLazyRoute
   '/dashboard/order/': typeof DashboardOrderIndexLazyRoute
   '/dashboard/payment/': typeof DashboardPaymentIndexLazyRoute
@@ -500,6 +516,7 @@ export interface FileRouteTypes {
     | '/dashboard/document'
     | '/dashboard/family'
     | '/dashboard/group'
+    | '/dashboard/invite-management'
     | '/dashboard/marketing'
     | '/dashboard/order'
     | '/dashboard/payment'
@@ -535,6 +552,7 @@ export interface FileRouteTypes {
     | '/dashboard/document'
     | '/dashboard/family'
     | '/dashboard/group'
+    | '/dashboard/invite-management'
     | '/dashboard/marketing'
     | '/dashboard/order'
     | '/dashboard/payment'
@@ -572,6 +590,7 @@ export interface FileRouteTypes {
     | '/dashboard/document/'
     | '/dashboard/family/'
     | '/dashboard/group/'
+    | '/dashboard/invite-management/'
     | '/dashboard/marketing/'
     | '/dashboard/order/'
     | '/dashboard/payment/'
@@ -703,6 +722,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardMarketingIndexLazyRouteImport
       parentRoute: typeof DashboardRouteLazyRoute
     }
+    '/dashboard/invite-management/': {
+      id: '/dashboard/invite-management/'
+      path: '/invite-management'
+      fullPath: '/dashboard/invite-management'
+      preLoaderRoute: typeof DashboardInviteManagementIndexLazyRouteImport
+      parentRoute: typeof DashboardRouteLazyRoute
+    }
     '/dashboard/group/': {
       id: '/dashboard/group/'
       path: '/group'
@@ -877,6 +903,7 @@ interface DashboardRouteLazyRouteChildren {
   DashboardDocumentIndexLazyRoute: typeof DashboardDocumentIndexLazyRoute
   DashboardFamilyIndexLazyRoute: typeof DashboardFamilyIndexLazyRoute
   DashboardGroupIndexLazyRoute: typeof DashboardGroupIndexLazyRoute
+  DashboardInviteManagementIndexLazyRoute: typeof DashboardInviteManagementIndexLazyRoute
   DashboardMarketingIndexLazyRoute: typeof DashboardMarketingIndexLazyRoute
   DashboardOrderIndexLazyRoute: typeof DashboardOrderIndexLazyRoute
   DashboardPaymentIndexLazyRoute: typeof DashboardPaymentIndexLazyRoute
@@ -912,6 +939,8 @@ const DashboardRouteLazyRouteChildren: DashboardRouteLazyRouteChildren = {
   DashboardDocumentIndexLazyRoute: DashboardDocumentIndexLazyRoute,
   DashboardFamilyIndexLazyRoute: DashboardFamilyIndexLazyRoute,
   DashboardGroupIndexLazyRoute: DashboardGroupIndexLazyRoute,
+  DashboardInviteManagementIndexLazyRoute:
+    DashboardInviteManagementIndexLazyRoute,
   DashboardMarketingIndexLazyRoute: DashboardMarketingIndexLazyRoute,
   DashboardOrderIndexLazyRoute: DashboardOrderIndexLazyRoute,
   DashboardPaymentIndexLazyRoute: DashboardPaymentIndexLazyRoute,

apps/admin/src/routes/dashboard/invite-management/index.lazy.tsx

@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import InviteManagement from "@/sections/invite";
+
+export const Route = createLazyFileRoute("/dashboard/invite-management/")({
+  component: InviteManagement,
+});

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

@@ -0,0 +1,159 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { getAdminInviteList } from "@workspace/ui/services/admin/invite";
+import type { AxiosResponse } from "axios";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import InviteManagement from ".";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (
+      _key: string,
+      fallback: string,
+      options?: { count?: number }
+    ): string => {
+      if (typeof options?.count === "number") {
+        return `${options.count} days`;
+      }
+      return fallback;
+    },
+  }),
+}));
+
+vi.mock("@/stores/global", () => ({
+  useGlobalStore: () => ({
+    common: {
+      currency: {
+        currency_symbol: "$",
+      },
+    },
+  }),
+}));
+
+vi.mock("@/utils/common", () => ({
+  formatDate: (timestamp: number) => `date-${timestamp}`,
+}));
+
+vi.mock("@workspace/ui/services/admin/invite", () => ({
+  getAdminInviteList: vi.fn(),
+}));
+
+const mockedGetAdminInviteList = vi.mocked(getAdminInviteList);
+
+function createInviteListResponse(
+  data: API.GetAdminInviteListResponse
+): AxiosResponse<API.Response & { data?: API.GetAdminInviteListResponse }> {
+  return {
+    data: {
+      code: 200,
+      data,
+    },
+    status: 200,
+    statusText: "OK",
+    headers: {},
+    config: {
+      headers: {} as AxiosResponse["config"]["headers"],
+    },
+  };
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+beforeEach(() => {
+  localStorage.setItem("timezone", "UTC");
+});
+
+describe("InviteManagement", () => {
+  it("renders invite rows with status, purchase state, commission, and gift days", async () => {
+    mockedGetAdminInviteList.mockResolvedValue(
+      createInviteListResponse({
+        total: 1,
+        list: [
+          {
+            inviter_id: 10,
+            inviter_identifier: "agent@example.com",
+            invitee_id: 123,
+            invitee_identifier: "user@example.com",
+            invitee_avatar: "",
+            invitee_enable: true,
+            invited_at: 1_716_800_000,
+            order_count: 3,
+            has_purchased: true,
+            inviter_commission: 1500,
+            inviter_gift_days: 30,
+            invitee_gift_days: 7,
+          },
+        ],
+      })
+    );
+
+    render(<InviteManagement />);
+
+    await waitFor(() =>
+      expect(mockedGetAdminInviteList).toHaveBeenCalledWith({
+        page: 1,
+        size: 200,
+        search: undefined,
+        inviter_id: undefined,
+        invitee_id: undefined,
+      })
+    );
+
+    expect(await screen.findByText("agent@example.com")).not.toBeNull();
+    expect(screen.getByText("user@example.com")).not.toBeNull();
+    expect(screen.getByText("Enabled")).not.toBeNull();
+    expect(screen.getByText("Yes")).not.toBeNull();
+    expect(screen.getByText("$15.00")).not.toBeNull();
+    expect(screen.getByText("30 days")).not.toBeNull();
+    expect(screen.getByText("7 days")).not.toBeNull();
+    expect(screen.getByText("date-1716800000")).not.toBeNull();
+  });
+
+  it("shows the empty state when the API returns no rows", async () => {
+    mockedGetAdminInviteList.mockResolvedValue(
+      createInviteListResponse({
+        total: 0,
+        list: [],
+      })
+    );
+
+    render(<InviteManagement />);
+
+    expect(await screen.findByText("No invite records")).not.toBeNull();
+  });
+
+  it("shows a loading state while invites are being fetched", () => {
+    let resolveRequest:
+      | ((
+          value: AxiosResponse<
+            API.Response & { data?: API.GetAdminInviteListResponse }
+          >
+        ) => void)
+      | undefined;
+    mockedGetAdminInviteList.mockReturnValue(
+      new Promise((resolve) => {
+        resolveRequest = resolve;
+      })
+    );
+
+    render(<InviteManagement />);
+
+    expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
+    expect(resolveRequest).toBeTypeOf("function");
+  });
+
+  it("shows an error state when the request fails", async () => {
+    mockedGetAdminInviteList.mockRejectedValue(new Error("network failed"));
+
+    render(<InviteManagement />);
+
+    await waitFor(() => expect(mockedGetAdminInviteList).toHaveBeenCalled());
+    expect(await screen.findByText("Failed to load invites")).not.toBeNull();
+    expect(screen.queryByText("No invite records")).toBeNull();
+  });
+});

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

@@ -0,0 +1,213 @@
+"use client";
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@workspace/ui/components/alert";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@workspace/ui/components/avatar";
+import { Badge } from "@workspace/ui/components/badge";
+import Empty from "@workspace/ui/composed/empty";
+import {
+  ProTable,
+  type ProTableActions,
+} from "@workspace/ui/composed/pro-table/pro-table";
+import { getAdminInviteList } from "@workspace/ui/services/admin/invite";
+import { CircleAlert } from "lucide-react";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Display } from "@/components/display";
+import { formatDate } from "@/utils/common";
+
+type InviteFilters = {
+  search?: string;
+  inviter_id?: string;
+  invitee_id?: string;
+};
+
+function toOptionalNumber(value?: string) {
+  if (!value) return;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function InviteUserCell({
+  id,
+  identifier,
+  avatar,
+}: {
+  id: number;
+  identifier: string;
+  avatar?: string;
+}) {
+  const fallback = identifier?.charAt(0)?.toUpperCase() || "U";
+
+  return (
+    <div className="flex min-w-48 items-center gap-2">
+      <Avatar className="h-8 w-8">
+        <AvatarImage alt={identifier || `#${id}`} src={avatar} />
+        <AvatarFallback className="text-xs">{fallback}</AvatarFallback>
+      </Avatar>
+      <div className="min-w-0">
+        <div className="font-medium text-sm">#{id}</div>
+        <div className="max-w-52 truncate text-muted-foreground text-xs">
+          {identifier || "--"}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InviteIdentifierCell({
+  id,
+  identifier,
+}: {
+  id: number;
+  identifier: string;
+}) {
+  return (
+    <div className="min-w-44">
+      <div className="font-medium text-sm">#{id}</div>
+      <div className="max-w-52 truncate text-muted-foreground text-xs">
+        {identifier || "--"}
+      </div>
+    </div>
+  );
+}
+
+export default function InviteManagement() {
+  const { t } = useTranslation("invite");
+  const ref = useRef<ProTableActions>(null);
+
+  return (
+    <ProTable<API.AdminInviteRelation, InviteFilters>
+      action={ref}
+      columns={[
+        {
+          accessorKey: "inviter_id",
+          header: t("inviter", "Inviter"),
+          cell: ({ row }) => (
+            <InviteIdentifierCell
+              id={row.original.inviter_id}
+              identifier={row.original.inviter_identifier}
+            />
+          ),
+        },
+        {
+          accessorKey: "invitee_id",
+          header: t("invitee", "Invitee"),
+          cell: ({ row }) => (
+            <InviteUserCell
+              avatar={row.original.invitee_avatar}
+              id={row.original.invitee_id}
+              identifier={row.original.invitee_identifier}
+            />
+          ),
+        },
+        {
+          accessorKey: "invitee_enable",
+          header: t("status", "Status"),
+          cell: ({ row }) => (
+            <Badge
+              variant={row.original.invitee_enable ? "default" : "secondary"}
+            >
+              {row.original.invitee_enable
+                ? t("enabled", "Enabled")
+                : t("disabled", "Disabled")}
+            </Badge>
+          ),
+        },
+        {
+          accessorKey: "invited_at",
+          header: t("invitedAt", "Invited At"),
+          cell: ({ row }) => formatDate(row.original.invited_at),
+        },
+        {
+          accessorKey: "order_count",
+          header: t("orderCount", "Orders"),
+        },
+        {
+          accessorKey: "has_purchased",
+          header: t("hasPurchased", "Purchased"),
+          cell: ({ row }) => (
+            <Badge variant={row.original.has_purchased ? "default" : "outline"}>
+              {row.original.has_purchased ? t("yes", "Yes") : t("no", "No")}
+            </Badge>
+          ),
+        },
+        {
+          accessorKey: "inviter_commission",
+          header: t("commission", "Commission"),
+          cell: ({ row }) => (
+            <Display type="currency" value={row.original.inviter_commission} />
+          ),
+        },
+        {
+          accessorKey: "inviter_gift_days",
+          header: t("inviterGiftDays", "Inviter Gift Days"),
+          cell: ({ row }) =>
+            t("days", "{{count}} days", {
+              count: row.original.inviter_gift_days,
+            }),
+        },
+        {
+          accessorKey: "invitee_gift_days",
+          header: t("inviteeGiftDays", "Invitee Gift Days"),
+          cell: ({ row }) =>
+            t("days", "{{count}} days", {
+              count: row.original.invitee_gift_days,
+            }),
+        },
+      ]}
+      empty={<Empty description={t("empty", "No invite records")} />}
+      error={
+        <Alert className="mx-auto max-w-md" variant="destructive">
+          <CircleAlert aria-hidden="true" />
+          <AlertTitle>
+            {t("loadErrorTitle", "Failed to load invites")}
+          </AlertTitle>
+          <AlertDescription>
+            {t("loadErrorDescription", "Refresh the table or try again later.")}
+          </AlertDescription>
+        </Alert>
+      }
+      header={{ title: t("title", "Invite Management") }}
+      params={[
+        {
+          key: "search",
+          placeholder: t("searchPlaceholder", "Email or phone"),
+        },
+        {
+          key: "inviter_id",
+          placeholder: t("inviterId", "Inviter ID"),
+        },
+        {
+          key: "invitee_id",
+          placeholder: t("inviteeId", "Invitee ID"),
+        },
+      ]}
+      request={async (pagination, filters) => {
+        const { data } = await getAdminInviteList({
+          page: pagination.page,
+          size: pagination.size,
+          search: filters.search?.trim() || undefined,
+          inviter_id: toOptionalNumber(filters.inviter_id),
+          invitee_id: toOptionalNumber(filters.invitee_id),
+        });
+
+        return {
+          list:
+            data.data?.list.map((item) => ({
+              ...item,
+              id: `${item.inviter_id}-${item.invitee_id}-${item.invited_at}`,
+            })) || [],
+          total: data.data?.total || 0,
+        };
+      }}
+    />
+  );
+}

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

@@ -68,13 +68,21 @@ function QrCodeCell({ url }: { url?: string }) {
         <img
           alt="收款码"
           className="h-12 w-12 cursor-zoom-in object-cover"
+          height={48}
           src={url}
+          width={48}
         />
       </button>
       {zoomOpen && (
         <Dialog onOpenChange={setZoomOpen} open={zoomOpen}>
           <DialogContent className="max-w-sm">
-            <img alt="收款码" className="w-full" src={url} />
+            <img
+              alt="收款码"
+              className="w-full"
+              height={320}
+              src={url}
+              width={320}
+            />
           </DialogContent>
         </Dialog>
       )}
@@ -238,9 +246,7 @@ export default function WithdrawalPage() {
           {
             accessorKey: "qr_code_url",
             header: "收款码",
-            cell: ({ row }) => (
-              <QrCodeCell url={row.original.qr_code_url} />
-            ),
+            cell: ({ row }) => <QrCodeCell url={row.original.qr_code_url} />,
           },
           {
             accessorKey: "content",

packages/ui/src/composed/pro-table/pro-table.tsx

@@ -39,7 +39,13 @@ import { SortableRow } from "@workspace/ui/composed/pro-table/sortable-row";
 import { ProTableWrapper } from "@workspace/ui/composed/pro-table/wrapper";
 import { cn } from "@workspace/ui/lib/utils";
 import { useSize } from "ahooks";
-import { GripVertical, ListRestart, Loader, RefreshCcw } from "lucide-react";
+import {
+  CircleAlert,
+  GripVertical,
+  ListRestart,
+  Loader,
+  RefreshCcw,
+} from "lucide-react";
 import type React from "react";
 import {
   Fragment,
@@ -79,6 +85,7 @@ export interface ProTableProps<TData, TValue> {
     selectedRowsText: (total: number) => string;
   }>;
   empty?: React.ReactNode;
+  error?: React.ReactNode;
   onSort?: (
     sourceId: string | number,
     targetId: string | number | null,
@@ -104,6 +111,7 @@ export function ProTable<
   action,
   texts,
   empty,
+  error,
   onSort,
   initialFilters,
 }: ProTableProps<TData, TValue>) {
@@ -121,6 +129,8 @@ export function ProTable<
   const [rowSelection, setRowSelection] = useState({});
   const [data, setData] = useState<TData[]>([]);
   const [rowCount, setRowCount] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [requestError, setRequestError] = useState(false);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: 200,
@@ -193,6 +203,8 @@ export function ProTable<
   const fetchData = async () => {
     if (loading.current) return;
     loading.current = true;
+    setIsLoading(true);
+    setRequestError(false);
     try {
       const response = await request(
         {
@@ -205,10 +217,13 @@ export function ProTable<
       );
       setData(response.list);
       setRowCount(response.total);
-    } catch (error) {
-      console.log("Fetch data error:", error);
+    } catch (_error) {
+      setData([]);
+      setRowCount(0);
+      setRequestError(true);
     } finally {
       loading.current = false;
+      setIsLoading(false);
     }
   };
   const reset = async () => {
@@ -316,7 +331,16 @@ export function ProTable<
               ))}
             </TableHeader>
             <TableBody>
-              {table.getRowModel()?.rows?.length ? (
+              {requestError ? (
+                <TableRow>
+                  <TableCell
+                    className="py-12"
+                    colSpan={table.getAllLeafColumns().length}
+                  >
+                    {error || <ProTableErrorState />}
+                  </TableCell>
+                </TableRow>
+              ) : table.getRowModel()?.rows?.length ? (
                 onSort ? (
                   table.getRowModel().rows.map((row) => (
                     <SortableRow
@@ -371,7 +395,10 @@ export function ProTable<
                 )
               ) : (
                 <TableRow>
-                  <TableCell className="py-24" colSpan={columns.length + 2}>
+                  <TableCell
+                    className="py-24"
+                    colSpan={table.getAllLeafColumns().length}
+                  >
                     {empty || <Empty />}
                   </TableCell>
                 </TableRow>
@@ -380,8 +407,12 @@ export function ProTable<
           </Table>
         </ProTableWrapper>
 
-        {loading.current && (
-          <div className="absolute top-0 z-20 flex h-full w-full items-center justify-center bg-muted/80">
+        {isLoading && (
+          <div
+            aria-label="Loading data"
+            className="absolute top-0 z-20 flex h-full w-full items-center justify-center bg-muted/80"
+            role="status"
+          >
             <Loader className="h-4 w-4 animate-spin" />
           </div>
         )}
@@ -391,6 +422,16 @@ export function ProTable<
   );
 }
 
+function ProTableErrorState() {
+  return (
+    <Alert className="mx-auto max-w-md" variant="destructive">
+      <CircleAlert aria-hidden="true" />
+      <AlertTitle>Failed to load data</AlertTitle>
+      <AlertDescription>Refresh the table or try again later.</AlertDescription>
+    </Alert>
+  );
+}
+
 function createSelectColumn<TData, TValue>(): ColumnDef<TData, TValue> {
   return {
     id: "selected",

packages/ui/src/services/admin/invite.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+import request from "@workspace/ui/lib/request";
+
+/** Get global invite list GET /v1/admin/invite/list */
+export async function getAdminInviteList(
+  params: API.GetAdminInviteListParams,
+  options?: Record<string, unknown>
+) {
+  return request<API.Response & { data?: API.GetAdminInviteListResponse }>(
+    `${import.meta.env.VITE_API_PREFIX || ""}/v1/admin/invite/list`,
+    {
+      method: "GET",
+      params: {
+        ...params,
+      },
+      ...(options || {}),
+    }
+  );
+}

packages/ui/src/services/admin/typings.d.ts

@@ -2742,6 +2742,35 @@ declare namespace API {
     list: AdminInvitedUser[];
   };
 
+  type GetAdminInviteListParams = {
+    page: number;
+    size: number;
+    search?: string;
+    inviter_id?: number;
+    invitee_id?: number;
+  };
+
+  type AdminInviteRelation = {
+    id?: string;
+    inviter_id: number;
+    inviter_identifier: string;
+    invitee_id: number;
+    invitee_identifier: string;
+    invitee_avatar: string;
+    invitee_enable: boolean;
+    invited_at: number;
+    order_count: number;
+    has_purchased: boolean;
+    inviter_commission: number;
+    inviter_gift_days: number;
+    invitee_gift_days: number;
+  };
+
+  type GetAdminInviteListResponse = {
+    total: number;
+    list: AdminInviteRelation[];
+  };
+
   type ActivateOrderRequest = {
     order_no: string;
   };
@@ -3107,4 +3136,6 @@ declare namespace API {
     created_at: number;
     updated_at: number;
   };
+
+  type AdminWithdrawalLog = WithdrawalLog;
 }