feat: show referral relationships in admin user cards

frontend/src/lib/admin/stores/usersStore.js

@@ -25,6 +25,13 @@ export function createUsersStore({ api, onToast, at, routePrefix = "" }) {
     userDeleteOpen: false,
     userBanConfirmOpen: false,
     userMessageConfirmOpen: false,
+    userReferralsOpen: false,
+    userReferralsLoading: false,
+    userReferrals: [],
+    userReferralsTotal: 0,
+    userReferralsPage: 0,
+    userReferralsPageSize: USERS_PAGE_SIZE,
+    userReferralsInviter: null,
     userDetailTab: "profile",
     premiumUnlimitedDraft: false,
     premiumBonusGbDraft: "",
@@ -126,6 +133,12 @@ export function createUsersStore({ api, onToast, at, routePrefix = "" }) {
       userExtendDays: 30,
       userDetailLoading: true,
       userDetailTab: "subscription",
+      userReferralsOpen: false,
+      userReferralsLoading: false,
+      userReferrals: [],
+      userReferralsTotal: 0,
+      userReferralsPage: 0,
+      userReferralsInviter: null,
       userLogs: [],
       userLogsTotal: 0,
       userLogsPage: 0,
@@ -175,6 +188,12 @@ export function createUsersStore({ api, onToast, at, routePrefix = "" }) {
         userDeleteOpen: false,
         userBanConfirmOpen: false,
         userMessageConfirmOpen: false,
+        userReferralsOpen: false,
+        userReferralsLoading: false,
+        userReferrals: [],
+        userReferralsTotal: 0,
+        userReferralsPage: 0,
+        userReferralsInviter: null,
         userLogs: [],
         userLogsTotal: 0,
         userLogsPage: 0,
@@ -231,6 +250,58 @@ export function createUsersStore({ api, onToast, at, routePrefix = "" }) {
     loadUserLogs(page);
   }
 
+  async function openUserReferrals(page = 0) {
+    let s;
+    state.update((st) => {
+      s = st;
+      return st;
+    });
+    if (!s.openedUser) return;
+    const userId = s.openedUser.user_id;
+    const targetPage = Number.isFinite(page) ? Math.max(0, Math.floor(page)) : 0;
+    state.update((st) => ({
+      ...st,
+      userReferralsOpen: true,
+      userReferralsLoading: true,
+      userReferralsPage: targetPage,
+    }));
+    try {
+      const params = new URLSearchParams({
+        page: String(targetPage),
+        page_size: String(s.userReferralsPageSize || USERS_PAGE_SIZE),
+      });
+      const data = await api(`/admin/users/${userId}/referrals?${params.toString()}`);
+      if (data?.ok) {
+        state.update((st) => {
+          if (!st.openedUser || st.openedUser.user_id !== userId) return st;
+          return {
+            ...st,
+            userReferrals: data.invitees || [],
+            userReferralsTotal: Number(data.total || 0),
+            userReferralsPage: Number(data.page || 0),
+            userReferralsPageSize: Number(data.page_size || st.userReferralsPageSize),
+            userReferralsInviter: data.inviter || null,
+          };
+        });
+      } else if (data?.error) {
+        onToast(data.error);
+      }
+    } finally {
+      state.update((st) => ({ ...st, userReferralsLoading: false }));
+    }
+  }
+
+  function closeUserReferrals() {
+    state.update((s) => ({
+      ...s,
+      userReferralsOpen: false,
+    }));
+  }
+
+  function setUserReferralsPage(page) {
+    openUserReferrals(page);
+  }
+
   function copyToClipboard(text, successMessage = at("link_copied", {}, "Скопировано")) {
     if (!text) return;
     if (typeof navigator !== "undefined" && navigator?.clipboard?.writeText) {
@@ -564,5 +635,8 @@ export function createUsersStore({ api, onToast, at, routePrefix = "" }) {
     grantTraffic,
     loadUserLogs,
     setUserLogsPage,
+    openUserReferrals,
+    closeUserReferrals,
+    setUserReferralsPage,
   };
 }

frontend/src/lib/webapp/mockApi.js

@@ -405,6 +405,32 @@ function withDemoAvatars(users, size = 96) {
   return (users || []).map((user) => withDemoAvatar(user, size));
 }
 
+function demoAdminUserById(userId) {
+  return (DEMO_DATASET.adminUsers || []).find((user) => Number(user.user_id) === Number(userId));
+}
+
+function demoInviteesForUser(userId) {
+  return (DEMO_DATASET.adminUsers || [])
+    .filter((user) => Number(user.referred_by_id) === Number(userId))
+    .sort((a, b) => stringDate(b.registration_date) - stringDate(a.registration_date));
+}
+
+function withDemoReferralSummary(detail) {
+  if (!detail || typeof detail !== "object") return detail;
+  const decorated = withDemoAvatarDetail(detail);
+  const user = decorated.user || {};
+  const inviter = user.referred_by_id ? demoAdminUserById(user.referred_by_id) : null;
+  const invitees = demoInviteesForUser(user.user_id);
+  return {
+    ...decorated,
+    referral: {
+      ...(decorated.referral || {}),
+      inviter: inviter ? withDemoAvatar(inviter) : null,
+      invitees_total: invitees.length,
+    },
+  };
+}
+
 function withDemoAvatarTickets(tickets, size = 96) {
   return (tickets || []).map((ticket) => withDemoAvatarTicket(ticket, size));
 }
@@ -610,8 +636,21 @@ function demoApiResponse(path, cleanPath, options, context) {
     const id = Number(parts[3]);
     const detail = DEMO_DATASET.adminUserDetails?.[String(id)];
     if (!detail) return { ok: false, error: "not_found" };
-    const decoratedDetail = withDemoAvatarDetail(detail);
+    const decoratedDetail = withDemoReferralSummary(detail);
     if (parts[4]) {
+      if (parts[4] === "referrals") {
+        const invitees = demoInviteesForUser(id);
+        const page = paged(invitees, params, 25);
+        return {
+          ok: true,
+          user: clone(decoratedDetail.user),
+          inviter: clone(decoratedDetail.referral?.inviter || null),
+          invitees: clone(withDemoAvatars(page.items)),
+          total: page.total,
+          page: page.page,
+          page_size: page.pageSize,
+        };
+      }
       if (parts[4] === "telegram-profile-link") {
         return { ok: true, url: `https://t.me/${detail.user?.username || "demo_user"}` };
       }