feat: redesign referral network with scope selector

- Replace full graph with scoped view (campaign/partner/user)
- ScopeSelector component with tabs and searchable dropdown
- Store resets all state on scope change (selection, hover, filters)
- Remove dead NetworkSearch component and graphInstance globals
- i18n keys for scope selector in all 4 locales

src/pages/ReferralNetwork/components/NetworkFilters.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useReferralNetworkStore } from '@/store/referralNetwork';
 import type { NetworkGraphData } from '@/types/referralNetwork';
@@ -8,6 +8,10 @@ interface NetworkFiltersProps {
   className?: string;
 }
 
+/**
+ * @deprecated No longer used in the main page — replaced by ScopeSelector.
+ * Kept for potential future reuse.
+ */
 export function NetworkFilters({ data, className }: NetworkFiltersProps) {
   const { t } = useTranslation();
   const panelRef = useRef<HTMLDivElement>(null);
@@ -15,8 +19,7 @@ export function NetworkFilters({ data, className }: NetworkFiltersProps) {
   const filters = useReferralNetworkStore((s) => s.filters);
   const updateFilters = useReferralNetworkStore((s) => s.updateFilters);
   const resetFilters = useReferralNetworkStore((s) => s.resetFilters);
-  const isOpen = useReferralNetworkStore((s) => s.isFiltersOpen);
-  const setIsOpen = useReferralNetworkStore((s) => s.setIsFiltersOpen);
+  const [isOpen, setIsOpen] = useState(false);
 
   const hasActiveFilters =
     filters.campaigns.length > 0 || filters.partnersOnly || filters.minReferrals > 0;

src/pages/ReferralNetwork/components/NetworkGraph.tsx

@@ -6,7 +6,7 @@ import { inferSettings } from 'graphology-layout-forceatlas2';
 import { useReferralNetworkStore } from '@/store/referralNetwork';
 import type { NetworkGraphData, NetworkFilters } from '@/types/referralNetwork';
 import { getUserNodeColor, getUserNodeSize, getCampaignColor } from '../utils';
-import { setSigmaInstance, setGraphInstance } from '../sigmaGlobals';
+import { setSigmaInstance } from '../sigmaGlobals';
 
 interface NetworkGraphProps {
   data: NetworkGraphData;
@@ -145,6 +145,7 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
 
   const setSelectedNode = useReferralNetworkStore((s) => s.setSelectedNode);
   const setHoveredNode = useReferralNetworkStore((s) => s.setHoveredNode);
+  const setHighlightedNodes = useReferralNetworkStore((s) => s.setHighlightedNodes);
   const hoveredNodeId = useReferralNetworkStore((s) => s.hoveredNodeId);
   const highlightedNodes = useReferralNetworkStore((s) => s.highlightedNodes);
   const filters = useReferralNetworkStore((s) => s.filters);
@@ -268,7 +269,6 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
 
       sigmaRef.current = sigma;
       setSigmaInstance(sigma);
-      setGraphInstance(graph);
 
       if (graph.order > 0) {
         const inferred = inferSettings(graph);
@@ -348,9 +348,11 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
       }
       graphRef.current = null;
       setSigmaInstance(null);
-      setGraphInstance(null);
+
+      setHoveredNode(null);
+      setHighlightedNodes(new Set());
     };
-  }, [data, setSelectedNode, setHoveredNode, killFA2]);
+  }, [data, setSelectedNode, setHoveredNode, setHighlightedNodes, killFA2]);
 
   useEffect(() => {
     const container = containerRef.current;

src/pages/ReferralNetwork/components/NetworkSearch.tsx

@@ -1,234 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery } from '@tanstack/react-query';
-import { referralNetworkApi } from '@/api/referralNetwork';
-import { useReferralNetworkStore } from '@/store/referralNetwork';
-import { getSigmaInstance, getGraphInstance } from '../sigmaGlobals';
-
-interface NetworkSearchProps {
-  className?: string;
-}
-
-export function NetworkSearch({ className }: NetworkSearchProps) {
-  const { t } = useTranslation();
-  const [inputValue, setInputValue] = useState('');
-  const [debouncedQuery, setDebouncedQuery] = useState('');
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const setHighlightedNodes = useReferralNetworkStore((s) => s.setHighlightedNodes);
-  const setSelectedNode = useReferralNetworkStore((s) => s.setSelectedNode);
-
-  // Debounce
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedQuery(inputValue.trim());
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [inputValue]);
-
-  const { data: searchResults, isFetching } = useQuery({
-    queryKey: ['referral-network-search', debouncedQuery],
-    queryFn: () => referralNetworkApi.search(debouncedQuery),
-    enabled: debouncedQuery.length >= 2,
-    staleTime: 30_000,
-  });
-
-  // Open dropdown when results arrive
-  useEffect(() => {
-    if (searchResults && debouncedQuery.length >= 2) {
-      setIsDropdownOpen(true);
-    }
-  }, [searchResults, debouncedQuery]);
-
-  // Close on outside click
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setIsDropdownOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  function navigateToNode(nodeId: string) {
-    const sigma = getSigmaInstance();
-    const graph = getGraphInstance();
-
-    if (sigma && graph && graph.hasNode(nodeId)) {
-      // getNodeDisplayData returns viewport (pixel) coordinates.
-      // Convert to framed graph coordinates that the camera operates in.
-      const displayData = sigma.getNodeDisplayData(nodeId);
-      if (displayData) {
-        const camera = sigma.getCamera();
-        const framedCoords = sigma.viewportToFramedGraph({
-          x: displayData.x,
-          y: displayData.y,
-        });
-        camera.animate({ ...framedCoords, ratio: 0.15 }, { duration: 600 });
-      }
-
-      setHighlightedNodes(new Set([nodeId]));
-    }
-  }
-
-  function handleSelectUser(userId: number) {
-    setIsDropdownOpen(false);
-    setSelectedNode({ type: 'user', id: userId });
-    navigateToNode(`user_${userId}`);
-  }
-
-  function handleSelectCampaign(campaignId: number) {
-    setIsDropdownOpen(false);
-    setSelectedNode({ type: 'campaign', id: campaignId });
-    navigateToNode(`campaign_${campaignId}`);
-  }
-
-  function handleClear() {
-    setInputValue('');
-    setDebouncedQuery('');
-    setIsDropdownOpen(false);
-    setHighlightedNodes(new Set());
-    setSelectedNode(null);
-  }
-
-  const totalResults =
-    (searchResults?.users?.length ?? 0) + (searchResults?.campaigns?.length ?? 0);
-
-  return (
-    <div ref={dropdownRef} className={`relative ${className ?? ''}`}>
-      <div className="relative">
-        <svg
-          className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-500"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={1.5}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-          />
-        </svg>
-        <input
-          ref={inputRef}
-          type="text"
-          value={inputValue}
-          maxLength={200}
-          onChange={(e) => setInputValue(e.target.value)}
-          onFocus={() => {
-            if (searchResults && debouncedQuery.length >= 2) setIsDropdownOpen(true);
-          }}
-          placeholder={t('admin.referralNetwork.search.placeholder')}
-          className="w-full rounded-lg border border-dark-700/50 bg-dark-800/80 py-2 pl-10 pr-10 text-sm text-dark-100 placeholder-dark-500 outline-none transition-colors focus:border-accent-500/50 focus:ring-1 focus:ring-accent-500/30"
-        />
-        {inputValue && (
-          <button
-            onClick={handleClear}
-            aria-label={t('admin.referralNetwork.search.clear')}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-dark-500 transition-colors hover:text-dark-300"
-          >
-            <svg
-              className="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        )}
-        {isFetching && (
-          <div className="absolute right-10 top-1/2 -translate-y-1/2">
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-dark-600 border-t-accent-400" />
-          </div>
-        )}
-      </div>
-
-      {/* Dropdown */}
-      {isDropdownOpen && debouncedQuery.length >= 2 && (
-        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-80 overflow-y-auto rounded-lg border border-dark-700/50 bg-dark-900/95 shadow-xl backdrop-blur-md">
-          {totalResults === 0 && !isFetching && (
-            <div className="px-4 py-3 text-center text-sm text-dark-500">
-              {t('admin.referralNetwork.search.noResults')}
-            </div>
-          )}
-
-          {searchResults?.users && searchResults.users.length > 0 && (
-            <div>
-              {searchResults.users.map((user) => (
-                <button
-                  key={`u-${user.id}`}
-                  onClick={() => handleSelectUser(user.id)}
-                  className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-dark-800/80"
-                >
-                  <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent-500/20 text-xs font-medium text-accent-400">
-                    U
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-medium text-dark-100">
-                      {user.display_name}
-                    </p>
-                    <p className="truncate text-xs text-dark-500">
-                      {user.username ? `@${user.username}` : ''}
-                      {user.tg_id ? ` #${user.tg_id}` : ''}
-                    </p>
-                  </div>
-                  {user.is_partner && (
-                    <span className="shrink-0 rounded bg-warning-500/20 px-1.5 py-0.5 text-[10px] font-medium text-warning-400">
-                      {t('admin.referralNetwork.user.partner')}
-                    </span>
-                  )}
-                </button>
-              ))}
-            </div>
-          )}
-
-          {searchResults?.campaigns && searchResults.campaigns.length > 0 && (
-            <div>
-              {searchResults.users && searchResults.users.length > 0 && (
-                <div className="mx-4 border-t border-dark-700/50" />
-              )}
-              {searchResults.campaigns.map((campaign) => (
-                <button
-                  key={`c-${campaign.id}`}
-                  onClick={() => handleSelectCampaign(campaign.id)}
-                  className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-dark-800/80"
-                >
-                  <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-success-500/20 text-xs font-medium text-success-400">
-                    C
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-medium text-dark-100">{campaign.name}</p>
-                    <p className="truncate text-xs text-dark-500">{campaign.start_parameter}</p>
-                  </div>
-                  <span
-                    className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium ${
-                      campaign.is_active
-                        ? 'bg-success-500/20 text-success-400'
-                        : 'bg-dark-700/50 text-dark-400'
-                    }`}
-                  >
-                    {campaign.is_active
-                      ? t('admin.referralNetwork.campaign.active')
-                      : t('admin.referralNetwork.campaign.inactive')}
-                  </span>
-                </button>
-              ))}
-            </div>
-          )}
-
-          {totalResults > 0 && (
-            <div className="border-t border-dark-700/50 px-4 py-2 text-center text-xs text-dark-500">
-              {t('admin.referralNetwork.search.resultsCount', { count: totalResults })}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

src/pages/ReferralNetwork/components/ScopeSelector.tsx

@@ -0,0 +1,358 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { referralNetworkApi } from '@/api/referralNetwork';
+import type { ScopeSelection, ScopeType } from '@/types/referralNetwork';
+
+interface ScopeSelectorProps {
+  value: ScopeSelection | null;
+  onSelect: (selection: ScopeSelection | null) => void;
+  className?: string;
+}
+
+const SCOPE_TABS: ScopeType[] = ['campaign', 'partner', 'user'];
+
+export function ScopeSelector({ value, onSelect, className }: ScopeSelectorProps) {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState<ScopeType>(value?.type ?? 'campaign');
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedUserQuery, setDebouncedUserQuery] = useState('');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { data: scopeOptions, isLoading: isScopeLoading } = useQuery({
+    queryKey: ['referral-network', 'scope-options'],
+    queryFn: referralNetworkApi.getScopeOptions,
+    staleTime: 120_000,
+  });
+
+  // Debounce user search
+  useEffect(() => {
+    if (activeTab !== 'user') return;
+    const timer = setTimeout(() => {
+      setDebouncedUserQuery(searchInput.trim());
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchInput, activeTab]);
+
+  const { data: userSearchResults, isFetching: isUserSearching } = useQuery({
+    queryKey: ['referral-network-search', debouncedUserQuery],
+    queryFn: () => referralNetworkApi.search(debouncedUserQuery),
+    enabled: activeTab === 'user' && debouncedUserQuery.length >= 2,
+    staleTime: 30_000,
+  });
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Filter campaigns/partners by local search input
+  const filteredCampaigns = useMemo(() => {
+    if (!scopeOptions) return [];
+    const q = searchInput.toLowerCase().trim();
+    if (!q) return scopeOptions.campaigns;
+    return scopeOptions.campaigns.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.start_parameter.toLowerCase().includes(q),
+    );
+  }, [scopeOptions, searchInput]);
+
+  const filteredPartners = useMemo(() => {
+    if (!scopeOptions) return [];
+    const q = searchInput.toLowerCase().trim();
+    if (!q) return scopeOptions.partners;
+    return scopeOptions.partners.filter(
+      (p) =>
+        p.display_name.toLowerCase().includes(q) ||
+        (p.username && p.username.toLowerCase().includes(q)),
+    );
+  }, [scopeOptions, searchInput]);
+
+  function handleTabChange(tab: ScopeType) {
+    setActiveTab(tab);
+    setSearchInput('');
+    setDebouncedUserQuery('');
+    setIsDropdownOpen(true);
+    inputRef.current?.focus();
+  }
+
+  function handleSelectCampaign(campaign: { id: number; name: string }) {
+    onSelect({ type: 'campaign', id: campaign.id, label: campaign.name });
+    setIsDropdownOpen(false);
+    setSearchInput('');
+  }
+
+  function handleSelectPartner(partner: { id: number; display_name: string }) {
+    onSelect({ type: 'partner', id: partner.id, label: partner.display_name });
+    setIsDropdownOpen(false);
+    setSearchInput('');
+  }
+
+  function handleSelectUser(user: { id: number; display_name: string }) {
+    onSelect({ type: 'user', id: user.id, label: user.display_name });
+    setIsDropdownOpen(false);
+    setSearchInput('');
+  }
+
+  function handleClear() {
+    onSelect(null);
+    setSearchInput('');
+    setDebouncedUserQuery('');
+    setIsDropdownOpen(false);
+  }
+
+  const tabLabels: Record<ScopeType, string> = {
+    campaign: t('admin.referralNetwork.scope.campaign'),
+    partner: t('admin.referralNetwork.scope.partner'),
+    user: t('admin.referralNetwork.scope.user'),
+  };
+
+  const placeholders: Record<ScopeType, string> = {
+    campaign: t('admin.referralNetwork.scope.selectCampaign'),
+    partner: t('admin.referralNetwork.scope.selectPartner'),
+    user: t('admin.referralNetwork.scope.selectUser'),
+  };
+
+  // When scope is selected, show compact display
+  if (value) {
+    return (
+      <div className={`flex items-center gap-2 ${className ?? ''}`}>
+        <span className="rounded-md bg-accent-500/20 px-2 py-1 text-xs font-medium text-accent-400">
+          {tabLabels[value.type]}
+        </span>
+        <span className="truncate text-sm font-medium text-dark-100">{value.label}</span>
+        <button
+          onClick={handleClear}
+          aria-label={t('admin.referralNetwork.search.clear')}
+          className="shrink-0 rounded-md p-1 text-dark-500 transition-colors hover:bg-dark-800 hover:text-dark-300"
+        >
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    );
+  }
+
+  const isLoading = activeTab === 'user' ? isUserSearching : isScopeLoading;
+
+  return (
+    <div ref={containerRef} className={`relative ${className ?? ''}`}>
+      {/* Tab bar + search input row */}
+      <div className="flex items-center gap-2">
+        {/* Tabs */}
+        <div className="flex shrink-0 rounded-lg border border-dark-700/50 bg-dark-800 p-0.5">
+          {SCOPE_TABS.map((tab) => (
+            <button
+              key={tab}
+              onClick={() => handleTabChange(tab)}
+              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
+                activeTab === tab
+                  ? 'bg-accent-500/20 text-accent-400'
+                  : 'text-dark-400 hover:text-dark-200'
+              }`}
+            >
+              {tabLabels[tab]}
+            </button>
+          ))}
+        </div>
+
+        {/* Search input */}
+        <div className="relative min-w-0 flex-1">
+          <svg
+            className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-dark-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={1.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
+          </svg>
+          <input
+            ref={inputRef}
+            type="text"
+            value={searchInput}
+            maxLength={200}
+            onChange={(e) => {
+              setSearchInput(e.target.value);
+              if (!isDropdownOpen) setIsDropdownOpen(true);
+            }}
+            onFocus={() => setIsDropdownOpen(true)}
+            placeholder={placeholders[activeTab]}
+            className="w-full rounded-lg border border-dark-700/50 bg-dark-800/50 py-1.5 pl-8 pr-8 text-sm text-dark-100 placeholder-dark-500 outline-none transition-colors focus:border-accent-500/50 focus:ring-1 focus:ring-accent-500/30"
+          />
+          {isLoading && (
+            <div className="absolute right-2.5 top-1/2 -translate-y-1/2">
+              <div className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-dark-600 border-t-accent-400" />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Dropdown */}
+      {isDropdownOpen && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-xl border border-dark-700/50 bg-dark-800 shadow-xl backdrop-blur-md">
+          {activeTab === 'campaign' && renderCampaignList()}
+          {activeTab === 'partner' && renderPartnerList()}
+          {activeTab === 'user' && renderUserList()}
+        </div>
+      )}
+    </div>
+  );
+
+  function renderCampaignList() {
+    if (isScopeLoading) {
+      return (
+        <div className="flex items-center justify-center px-4 py-6">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-dark-600 border-t-accent-400" />
+        </div>
+      );
+    }
+
+    if (filteredCampaigns.length === 0) {
+      return (
+        <div className="px-4 py-3 text-center text-sm text-dark-500">
+          {t('admin.referralNetwork.scope.noResults')}
+        </div>
+      );
+    }
+
+    return filteredCampaigns.map((campaign) => (
+      <button
+        key={campaign.id}
+        onClick={() => handleSelectCampaign(campaign)}
+        className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-dark-700/50"
+      >
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-success-500/20 text-xs font-medium text-success-400">
+          C
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-dark-100">{campaign.name}</p>
+          <p className="truncate text-xs text-dark-500">
+            {campaign.start_parameter}
+            {' / '}
+            {campaign.direct_users} {t('admin.referralNetwork.scope.users')}
+          </p>
+        </div>
+        <span
+          className={`shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium ${
+            campaign.is_active
+              ? 'bg-success-500/20 text-success-400'
+              : 'bg-dark-700/50 text-dark-400'
+          }`}
+        >
+          {campaign.is_active
+            ? t('admin.referralNetwork.scope.active')
+            : t('admin.referralNetwork.scope.inactive')}
+        </span>
+      </button>
+    ));
+  }
+
+  function renderPartnerList() {
+    if (isScopeLoading) {
+      return (
+        <div className="flex items-center justify-center px-4 py-6">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-dark-600 border-t-accent-400" />
+        </div>
+      );
+    }
+
+    if (filteredPartners.length === 0) {
+      return (
+        <div className="px-4 py-3 text-center text-sm text-dark-500">
+          {t('admin.referralNetwork.scope.noResults')}
+        </div>
+      );
+    }
+
+    return filteredPartners.map((partner) => (
+      <button
+        key={partner.id}
+        onClick={() => handleSelectPartner(partner)}
+        className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-dark-700/50"
+      >
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-warning-500/20 text-xs font-medium text-warning-400">
+          P
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-dark-100">{partner.display_name}</p>
+          <p className="truncate text-xs text-dark-500">
+            {partner.username ? `@${partner.username}` : ''}
+            {partner.username ? ' / ' : ''}
+            {partner.campaign_count} {t('admin.referralNetwork.scope.campaigns')}
+          </p>
+        </div>
+      </button>
+    ));
+  }
+
+  function renderUserList() {
+    if (debouncedUserQuery.length < 2) {
+      return (
+        <div className="px-4 py-3 text-center text-sm text-dark-500">
+          {t('admin.referralNetwork.scope.selectUser')}
+        </div>
+      );
+    }
+
+    if (isUserSearching) {
+      return (
+        <div className="flex items-center justify-center px-4 py-6">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-dark-600 border-t-accent-400" />
+        </div>
+      );
+    }
+
+    const users = userSearchResults?.users ?? [];
+
+    if (users.length === 0) {
+      return (
+        <div className="px-4 py-3 text-center text-sm text-dark-500">
+          {t('admin.referralNetwork.scope.noResults')}
+        </div>
+      );
+    }
+
+    return users.map((user) => (
+      <button
+        key={user.id}
+        onClick={() => handleSelectUser(user)}
+        className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-dark-700/50"
+      >
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-accent-500/20 text-xs font-medium text-accent-400">
+          U
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium text-dark-100">{user.display_name}</p>
+          <p className="truncate text-xs text-dark-500">
+            {user.username ? `@${user.username}` : ''}
+            {user.tg_id ? ` #${user.tg_id}` : ''}
+          </p>
+        </div>
+        {user.is_partner && (
+          <span className="shrink-0 rounded bg-warning-500/20 px-1.5 py-0.5 text-[10px] font-medium text-warning-400">
+            {t('admin.referralNetwork.user.partner')}
+          </span>
+        )}
+      </button>
+    ));
+  }
+}