);
diff --git a/src/pages/ReferralNetwork/components/UserDetailPanel.tsx b/src/pages/ReferralNetwork/components/UserDetailPanel.tsx
index 653a4ed..0b626d7 100644
--- a/src/pages/ReferralNetwork/components/UserDetailPanel.tsx
+++ b/src/pages/ReferralNetwork/components/UserDetailPanel.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { referralNetworkApi } from '@/api/referralNetwork';
import { useReferralNetworkStore } from '@/store/referralNetwork';
-import { formatKopeksToRubles } from '../utils';
+import { formatKopeksToRubles, getSubscriptionStatusColor } from '../utils';
interface UserDetailPanelProps {
userId: number;
@@ -101,7 +101,24 @@ export function UserDetailPanel({ userId, className }: UserDetailPanelProps) {
{user.subscription_name ? (
-
{user.subscription_name}
+
+
{user.subscription_name}
+ {user.subscription_status && (
+
+
+
+ {t(
+ `admin.referralNetwork.user.subscriptionStatus.${user.subscription_status}`,
+ )}
+
+
+ )}
+
{user.subscription_end && (
{t('admin.referralNetwork.user.validUntil', {
diff --git a/src/pages/ReferralNetwork/utils.ts b/src/pages/ReferralNetwork/utils.ts
index f1a89ae..c7b5e1d 100644
--- a/src/pages/ReferralNetwork/utils.ts
+++ b/src/pages/ReferralNetwork/utils.ts
@@ -1,3 +1,5 @@
+import type { SubscriptionStatus } from '@/types/referralNetwork';
+
/**
* Format kopeks to a human-readable ruble string.
*/
@@ -5,6 +7,63 @@ export function formatKopeksToRubles(kopeks: number): string {
return `${(kopeks / 100).toLocaleString('ru-RU')}`;
}
+/**
+ * Single source of truth for user node colors.
+ */
+export const NODE_COLORS = {
+ partner: '#f0c261',
+ topReferrer: '#e85d9a',
+ activeReferrer: '#7c6aef',
+ paidActive: '#22c55e',
+ trialActive: '#38bdf8',
+ paidExpired: '#ef4444',
+ trialExpired: '#fb923c',
+ campaignUser: '#fbbf24',
+ regular: '#94a3b8',
+} as const;
+
+/**
+ * Map subscription status to its node color.
+ */
+const SUBSCRIPTION_STATUS_COLOR: Record = {
+ paid_active: NODE_COLORS.paidActive,
+ trial_active: NODE_COLORS.trialActive,
+ paid_expired: NODE_COLORS.paidExpired,
+ trial_expired: NODE_COLORS.trialExpired,
+};
+
+export function getSubscriptionStatusColor(status: SubscriptionStatus): string {
+ return SUBSCRIPTION_STATUS_COLOR[status];
+}
+
+/**
+ * Fill color priority:
+ * 1. Subscription status (when available)
+ * 2. Referral role (when no subscription data — keeps visual differentiation)
+ * 3. Regular fallback (campaign membership visible via edges, not fill)
+ */
+export function getNodeFillColor(
+ subscriptionStatus: SubscriptionStatus | null,
+ directReferrals: number = 0,
+ isPartner: boolean = false,
+): string {
+ if (subscriptionStatus) return SUBSCRIPTION_STATUS_COLOR[subscriptionStatus];
+ if (isPartner) return NODE_COLORS.partner;
+ if (directReferrals >= 10) return NODE_COLORS.topReferrer;
+ if (directReferrals >= 1) return NODE_COLORS.activeReferrer;
+ return NODE_COLORS.regular;
+}
+
+/**
+ * Border color = referral role. Returns null if no special role.
+ */
+export function getNodeBorderColor(directReferrals: number, isPartner: boolean): string | null {
+ if (isPartner) return NODE_COLORS.partner;
+ if (directReferrals >= 10) return NODE_COLORS.topReferrer;
+ if (directReferrals >= 1) return NODE_COLORS.activeReferrer;
+ return null;
+}
+
/**
* Campaign node color palette. Each campaign gets a distinct color
* based on its index position.
@@ -26,21 +85,6 @@ export function getCampaignColor(index: number): string {
return CAMPAIGN_COLORS[index % CAMPAIGN_COLORS.length];
}
-/**
- * Determine the visual color for a user node.
- */
-export function getUserNodeColor(
- directReferrals: number,
- isPartner: boolean,
- campaignId: number | null,
-): string {
- if (isPartner) return '#f0c261';
- if (directReferrals >= 10) return '#e85d9a';
- if (directReferrals >= 1) return '#7c6aef';
- if (campaignId !== null) return '#4dd9c0';
- return '#6b7280';
-}
-
/**
* Determine the visual size for a user node.
* Size is proportional to direct_referrals, clamped between min and max.
diff --git a/src/types/referralNetwork.ts b/src/types/referralNetwork.ts
index 10802b4..9dffb8f 100644
--- a/src/types/referralNetwork.ts
+++ b/src/types/referralNetwork.ts
@@ -1,3 +1,5 @@
+export type SubscriptionStatus = 'trial_active' | 'paid_active' | 'trial_expired' | 'paid_expired';
+
export interface NetworkUserNode {
id: number;
tg_id: number | null;
@@ -14,6 +16,7 @@ export interface NetworkUserNode {
personal_spent_kopeks: number;
subscription_name: string | null;
subscription_end: string | null;
+ subscription_status: SubscriptionStatus | null;
registered_at: string | null;
}
@@ -48,6 +51,7 @@ export interface NetworkGraphData {
total_referrers: number;
total_campaigns: number;
total_earnings_kopeks: number;
+ total_subscription_revenue_kopeks: number;
}
export interface NetworkUserDetail {
@@ -68,6 +72,7 @@ export interface NetworkUserDetail {
personal_spent_kopeks: number;
subscription_name: string | null;
subscription_end: string | null;
+ subscription_status: SubscriptionStatus | null;
registered_at: string | null;
}