etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #342 from BEDOLAGA-DEV/dev

Browse Source 
Dev
This commit is contained in:
Egor
2026-03-22 10:55:40 +03:00
committed by GitHub
parent 15f13d8682 5b12784ab8
commit 39c0d11962
13 changed files with 419 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@@ -23,6 +23,7 @@
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@radix-ui/react-visually-hidden": "^1.2.4",
"@sigma/node-border": "^3.0.0",
"@tanstack/react-query": "^5.8.0",
"@tanstack/react-table": "^8.21.3",
"@telegram-apps/sdk-react": "^3.3.9",
@@ -2643,6 +2644,15 @@
"win32"
]
},
"node_modules/@sigma/node-border": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@sigma/node-border/-/node-border-3.0.0.tgz",
"integrity": "sha512-mE3zUfjvJVuAMhSjiP/zdlkqe0OVTETxd04XHUwof01YqdzTk0OB4ACJIhWrwgsBXl7tTd9lPuKoroafLh8MtQ==",
"license": "MIT",
"peerDependencies": {
"sigma": ">=3.0.0-beta.17"
}
},
"node_modules/@standard-schema/spec": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",

1
package.json
View File

@@ -31,6 +31,7 @@
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@radix-ui/react-visually-hidden": "^1.2.4",
"@sigma/node-border": "^3.0.0",
"@tanstack/react-query": "^5.8.0",
"@tanstack/react-table": "^8.21.3",
"@telegram-apps/sdk-react": "^3.3.9",

22
src/locales/en.json
View File

@@ -1247,17 +1247,24 @@
"totalUsers": "Users",
"totalReferrers": "Referrers",
"totalCampaigns": "Campaigns",
"totalEarnings": "Total earnings"
"subscriptionRevenue": "Subscription revenue",
"totalEarnings": "Ref. earnings"
},
"legend": {
"title": "Legend",
"regularUser": "Regular user",
"fillTitle": "Subscription",
"borderTitle": "Referral role",
"regularUser": "No subscription",
"activeReferrer": "Active referrer",
"partner": "Partner",
"topReferrer": "Top referrer (10+)",
"campaignUser": "From campaign",
"partnerCampaignEdge": "Partner → Campaign",
"campaignNode": "Ad campaign"
"campaignNode": "Ad campaign",
"paidActive": "Paid subscription",
"trialActive": "Trial",
"paidExpired": "Paid expired",
"trialExpired": "Trial expired"
},
"user": {
"tgId": "TG ID",
@@ -1276,7 +1283,13 @@
"source": "Source",
"referredBy": "Referred by",
"fromCampaign": "Campaign",
"organic": "Organic"
"organic": "Organic",
"subscriptionStatus": {
"trial_active": "Trial",
"paid_active": "Paid",
"trial_expired": "Trial expired",
"paid_expired": "Paid expired"
}
},
"campaign": {
"startParam": "Parameter",
@@ -3227,6 +3240,7 @@
"system": "System",
"permanent": "Permanent",
"expired": "expired",
"envManaged": "Managed via ADMIN_IDS / ADMIN_EMAILS in env",
"revoke": "Revoke",
"revokeAriaLabel": "Revoke role {{role}} from {{user}}",
"table": {

22
src/locales/fa.json
View File

@@ -1081,17 +1081,24 @@
"totalUsers": "کاربران",
"totalReferrers": "ارجاع‌دهندگان",
"totalCampaigns": "کمپین‌ها",
"totalEarnings": "درآمد کل"
"subscriptionRevenue": "درآمد اشتراک",
"totalEarnings": "درآمد ارجاع"
},
"legend": {
"title": "راهنما",
"regularUser": "کاربر عادی",
"fillTitle": "اشتراک",
"borderTitle": "نقش ارجاع‌دهنده",
"regularUser": "بدون اشتراک",
"activeReferrer": "ارجاع‌دهنده فعال",
"partner": "شریک",
"topReferrer": "ارجاع‌دهنده برتر (+۱۰)",
"campaignUser": "از کمپین",
"partnerCampaignEdge": "شریک → کمپین",
"campaignNode": "کمپین تبلیغاتی"
"campaignNode": "کمپین تبلیغاتی",
"paidActive": "اشتراک پرداختی",
"trialActive": "آزمایشی",
"paidExpired": "اشتراک پرداختی منقضی",
"trialExpired": "آزمایشی منقضی"
},
"user": {
"tgId": "شناسه TG",
@@ -1110,7 +1117,13 @@
"source": "منبع",
"referredBy": "معرفی شده توسط",
"fromCampaign": "کمپین",
"organic": "طبیعی"
"organic": "طبیعی",
"subscriptionStatus": {
"trial_active": "آزمایشی",
"paid_active": "پرداختی",
"trial_expired": "آزمایشی منقضی",
"paid_expired": "پرداختی منقضی"
}
},
"campaign": {
"startParam": "پارامتر",
@@ -2968,6 +2981,7 @@
"system": "سیستم",
"permanent": "دائمی",
"expired": "منقضی شده",
"envManaged": "مدیریت از طریق ADMIN_IDS / ADMIN_EMAILS در env",
"revoke": "لغو",
"revokeAriaLabel": "لغو نقش {{role}} از {{user}}",
"table": {

22
src/locales/ru.json
View File

@@ -1268,17 +1268,24 @@
"totalUsers": "Пользователей",
"totalReferrers": "Рефереров",
"totalCampaigns": "Кампаний",
"totalEarnings": "Общий доход"
"subscriptionRevenue": "Доход с подписок",
"totalEarnings": "Реф. доход"
},
"legend": {
"title": "Легенда",
"regularUser": "Обычный",
"fillTitle": "Подписка",
"borderTitle": "Роль реферера",
"regularUser": "Без подписки",
"activeReferrer": "Активный реферер",
"partner": "Партнёр",
"topReferrer": "Топ-реферер (10+)",
"campaignUser": "Из кампании",
"partnerCampaignEdge": "Партнёр → РК",
"campaignNode": "Рекламная кампания"
"campaignNode": "Рекламная кампания",
"paidActive": "Платная подписка",
"trialActive": "Триал",
"paidExpired": "Платная истекла",
"trialExpired": "Триал истёк"
},
"user": {
"tgId": "TG ID",
@@ -1297,7 +1304,13 @@
"source": "Источник",
"referredBy": "Пришёл от",
"fromCampaign": "РК",
"organic": "Органический"
"organic": "Органический",
"subscriptionStatus": {
"trial_active": "Триал",
"paid_active": "Платная",
"trial_expired": "Триал истёк",
"paid_expired": "Платная истекла"
}
},
"campaign": {
"startParam": "Параметр",
@@ -3773,6 +3786,7 @@
"system": "Система",
"permanent": "Бессрочно",
"expired": "истекло",
"envManaged": "Управляется через ADMIN_IDS / ADMIN_EMAILS в env",
"revoke": "Отозвать",
"revokeAriaLabel": "Отозвать роль {{role}} у {{user}}",
"table": {

22
src/locales/zh.json
View File

@@ -1081,17 +1081,24 @@
"totalUsers": "用户",
"totalReferrers": "推荐人",
"totalCampaigns": "活动",
"totalEarnings": "总收入"
"subscriptionRevenue": "订阅收入",
"totalEarnings": "推荐收入"
},
"legend": {
"title": "图例",
"regularUser": "普通用户",
"fillTitle": "订阅状态",
"borderTitle": "推荐角色",
"regularUser": "无订阅",
"activeReferrer": "活跃推荐人",
"partner": "合作伙伴",
"topReferrer": "顶级推荐人 (10+)",
"campaignUser": "来自活动",
"partnerCampaignEdge": "合作伙伴 → 活动",
"campaignNode": "广告活动"
"campaignNode": "广告活动",
"paidActive": "付费订阅",
"trialActive": "试用",
"paidExpired": "付费已过期",
"trialExpired": "试用已过期"
},
"user": {
"tgId": "TG ID",
@@ -1110,7 +1117,13 @@
"source": "来源",
"referredBy": "由...推荐",
"fromCampaign": "活动",
"organic": "自然流量"
"organic": "自然流量",
"subscriptionStatus": {
"trial_active": "试用",
"paid_active": "付费",
"trial_expired": "试用已过期",
"paid_expired": "付费已过期"
}
},
"campaign": {
"startParam": "参数",
@@ -2967,6 +2980,7 @@
"system": "系统",
"permanent": "永久",
"expired": "已过期",
"envManaged": "通过 ADMIN_IDS / ADMIN_EMAILS 环境变量管理",
"revoke": "撤销",
"revokeAriaLabel": "撤销 {{user}} 的角色 {{role}}",
"table": {

14
src/pages/AdminRoleAssign.tsx
View File

@@ -79,6 +79,7 @@ const UserPlusIcon = () => (
// === Constants ===
const PAGE_SIZE = 10;
const SUPERADMIN_LEVEL = 999;
// === Sub-components ===
@@ -278,10 +279,10 @@ export default function AdminRoleAssign() {
enabled: !!roles && roles.length > 0,
});
// Available roles filtered by canManageRole
// Available roles filtered by canManageRole (superadmin excluded — env-only)
const assignableRoles = useMemo(() => {
if (!roles) return [];
return roles.filter((r) => r.is_active && canManageRole(r.level));
return roles.filter((r) => r.is_active && r.level < SUPERADMIN_LEVEL && canManageRole(r.level));
}, [roles, canManageRole]);
// Roles map for quick lookup
@@ -627,6 +628,14 @@ export default function AdminRoleAssign() {
{/* Actions */}
<div className="col-span-1 flex justify-end sm:justify-start">
{assignment.role_level >= SUPERADMIN_LEVEL ? (
<span
className="rounded px-1.5 py-0.5 text-[10px] font-medium text-dark-500"
title={t('admin.roleAssign.envManaged')}
>
ENV
</span>
) : (
<PermissionGate permission="roles:assign">
<button
onClick={() => setRevokeConfirm(assignment.id)}
@@ -641,6 +650,7 @@ export default function AdminRoleAssign() {
<XCircleIcon />
</button>
</PermissionGate>
)}
</div>
</div>
);

181
src/pages/ReferralNetwork/components/NetworkGraph.tsx
View File

@@ -5,7 +5,14 @@ import FA2LayoutSupervisor from 'graphology-layout-forceatlas2/worker';
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 { createNodeBorderProgram } from '@sigma/node-border';
import {
getNodeFillColor,
getNodeBorderColor,
getUserNodeSize,
getCampaignColor,
NODE_COLORS,
} from '../utils';
import { setSigmaInstance } from '../sigmaGlobals';
interface NetworkGraphProps {
@@ -13,38 +20,177 @@ interface NetworkGraphProps {
className?: string;
}
/**
* Compute initial positions using radial layout based on referral depth.
* Campaign nodes at center, direct users in first ring, their referrals further out.
*/
function computeRadialPositions(
graphData: NetworkGraphData,
): Map<string, { x: number; y: number }> {
const positions = new Map<string, { x: number; y: number }>();
// Build adjacency: referrer_id -> [user_ids]
const childrenOf = new Map<number, number[]>();
const userMap = new Map<number, (typeof graphData.users)[0]>();
for (const user of graphData.users) {
userMap.set(user.id, user);
if (user.referrer_id !== null) {
const children = childrenOf.get(user.referrer_id) ?? [];
children.push(user.id);
childrenOf.set(user.referrer_id, children);
}
}
// Place campaign nodes at center
const campaignCount = graphData.campaigns.length;
graphData.campaigns.forEach((campaign, i) => {
const angle = (2 * Math.PI * i) / Math.max(campaignCount, 1);
positions.set(`campaign_${campaign.id}`, {
x: Math.cos(angle) * 5,
y: Math.sin(angle) * 5,
});
});
// BFS from campaign users outward
const placed = new Set<number>();
const queue: Array<{ userId: number; depth: number; parentAngle: number }> = [];
// Seed: campaign users at depth 1
const campaignUserIds = new Set(
graphData.users.filter((u) => u.campaign_id !== null).map((u) => u.id),
);
const campaignUsers = [...campaignUserIds];
campaignUsers.forEach((userId, i) => {
const angle = (2 * Math.PI * i) / Math.max(campaignUsers.length, 1);
const radius = 30 + Math.random() * 10;
positions.set(`user_${userId}`, {
x: Math.cos(angle) * radius,
y: Math.sin(angle) * radius,
});
placed.add(userId);
queue.push({ userId, depth: 1, parentAngle: angle });
});
// Also seed root referrers (users who refer others but have no referrer and no campaign)
for (const user of graphData.users) {
if (
!placed.has(user.id) &&
user.referrer_id === null &&
(childrenOf.get(user.id)?.length ?? 0) > 0
) {
const angle = Math.random() * 2 * Math.PI;
const radius = 20 + Math.random() * 10;
positions.set(`user_${user.id}`, {
x: Math.cos(angle) * radius,
y: Math.sin(angle) * radius,
});
placed.add(user.id);
queue.push({ userId: user.id, depth: 1, parentAngle: angle });
}
}
// BFS: place children at increasing radius
while (queue.length > 0) {
const { userId, depth, parentAngle } = queue.shift()!;
const children = childrenOf.get(userId) ?? [];
const childCount = children.length;
if (childCount === 0) continue;
const spreadAngle = Math.min(Math.PI / 2, (Math.PI / 3) * (1 / Math.max(depth, 1)));
children.forEach((childId, i) => {
if (placed.has(childId)) return;
const offset = childCount === 1 ? 0 : (i / (childCount - 1) - 0.5) * spreadAngle;
const angle = parentAngle + offset + (Math.random() - 0.5) * 0.1;
const radius = 30 + depth * 25 + Math.random() * 10;
positions.set(`user_${childId}`, {
x: Math.cos(angle) * radius,
y: Math.sin(angle) * radius,
});
placed.add(childId);
queue.push({ userId: childId, depth: depth + 1, parentAngle: angle });
});
}
// Place remaining unplaced users at the outer edge
for (const user of graphData.users) {
if (!placed.has(user.id)) {
const angle = Math.random() * 2 * Math.PI;
const radius = 60 + Math.random() * 40;
positions.set(`user_${user.id}`, {
x: Math.cos(angle) * radius,
y: Math.sin(angle) * radius,
});
}
}
return positions;
}
const BorderedNodeProgram = createNodeBorderProgram({
borders: [
{
size: { attribute: 'borderSize', defaultValue: 0 },
color: { attribute: 'borderColor' },
},
{
size: { fill: true },
color: { attribute: 'color' },
},
],
});
function buildFullGraph(graphData: NetworkGraphData): Graph {
const graph = new Graph();
const positions = computeRadialPositions(graphData);
graphData.campaigns.forEach((campaign, index) => {
graph.addNode(`campaign_${campaign.id}`, {
label: campaign.name,
const pos = positions.get(`campaign_${campaign.id}`) ?? {
x: Math.random() * 100,
y: Math.random() * 100,
};
graph.addNode(`campaign_${campaign.id}`, {
label: campaign.name,
x: pos.x,
y: pos.y,
size: 16,
color: getCampaignColor(index),
type: 'circle',
type: 'bordered',
nodeType: 'campaign',
nodeId: campaign.id,
borderSize: 0,
borderColor: getCampaignColor(index),
});
});
graphData.users.forEach((user) => {
const color = getUserNodeColor(user.direct_referrals, user.is_partner, user.campaign_id);
const fillColor = getNodeFillColor(
user.subscription_status,
user.direct_referrals,
user.is_partner,
);
const borderColor = getNodeBorderColor(user.direct_referrals, user.is_partner);
const size = getUserNodeSize(user.direct_referrals);
const pos = positions.get(`user_${user.id}`) ?? {
x: Math.random() * 100,
y: Math.random() * 100,
};
graph.addNode(`user_${user.id}`, {
label: user.display_name,
x: Math.random() * 100,
y: Math.random() * 100,
x: pos.x,
y: pos.y,
size,
color,
type: 'circle',
color: fillColor,
type: 'bordered',
nodeType: 'user',
nodeId: user.id,
isPartner: user.is_partner,
directReferrals: user.direct_referrals,
campaignId: user.campaign_id,
subscriptionStatus: user.subscription_status,
borderColor: borderColor ?? fillColor,
borderSize: borderColor ? 0.35 : 0,
});
});
@@ -57,7 +203,7 @@ function buildFullGraph(graphData: NetworkGraphData): Graph {
edge.type === 'partner_campaign'
? 'rgba(255, 138, 101, 0.5)'
: edge.type === 'campaign'
? 'rgba(77, 217, 192, 0.06)'
? 'rgba(255, 255, 255, 0.06)'
: 'rgba(255,255,255,0.03)',
size: edge.type === 'partner_campaign' ? 1.5 : 0.3,
edgeType: edge.type,
@@ -193,8 +339,10 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
labelRenderedSizeThreshold: 14,
zIndex: true,
defaultEdgeColor: '#ffffff06',
defaultNodeColor: '#6b7280',
labelColor: { color: '#e8e6f0' },
defaultNodeColor: NODE_COLORS.regular,
nodeProgramClasses: { bordered: BorderedNodeProgram },
defaultNodeType: 'bordered',
labelColor: { attribute: 'labelColor', color: '#e5e7eb' },
labelFont: 'Inter, system-ui, sans-serif',
labelSize: 11,
stagePadding: 40,
@@ -213,6 +361,7 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
if (highlighted.size > 0) {
if (highlighted.has(node)) {
res.highlighted = true;
res.labelColor = '#111827';
res.zIndex = 2;
} else {
res.color = `${attrs.color}33`;
@@ -224,9 +373,11 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
if (hovered) {
if (node === hovered) {
res.highlighted = true;
res.labelColor = '#111827';
res.zIndex = 2;
} else if (graph.hasNode(hovered) && graph.areNeighbors(node, hovered)) {
res.highlighted = true;
res.labelColor = '#111827';
res.zIndex = 1;
} else if (!highlighted.has(node)) {
res.color = `${attrs.color}33`;
@@ -278,8 +429,10 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
linLogMode: true,
adjustSizes: true,
barnesHutOptimize: graph.order > 100,
gravity: 1,
slowDown: 2,
gravity: 0.05,
scalingRatio: 10,
slowDown: 5,
strongGravityMode: false,
},
});
fa2Ref.current = supervisor;

33
src/pages/ReferralNetwork/components/NetworkLegend.tsx
View File

@@ -1,4 +1,5 @@
import { useTranslation } from 'react-i18next';
import { NODE_COLORS } from '../utils';
interface NetworkLegendProps {
className?: string;
@@ -6,12 +7,15 @@ interface NetworkLegendProps {
const CAMPAIGN_GRADIENT_COLORS = ['#4dd9c0', '#f0c261', '#e85d9a', '#6b9fff', '#b97aff'];
const USER_LEGEND_ITEMS = [
{ colorKey: '#6b7280', labelKey: 'admin.referralNetwork.legend.regularUser' },
{ colorKey: '#7c6aef', labelKey: 'admin.referralNetwork.legend.activeReferrer' },
{ colorKey: '#f0c261', labelKey: 'admin.referralNetwork.legend.partner' },
{ colorKey: '#e85d9a', labelKey: 'admin.referralNetwork.legend.topReferrer' },
{ colorKey: '#4dd9c0', labelKey: 'admin.referralNetwork.legend.campaignUser' },
const FILL_ITEMS = [
{ color: NODE_COLORS.paidActive, labelKey: 'admin.referralNetwork.legend.paidActive' },
{ color: NODE_COLORS.trialActive, labelKey: 'admin.referralNetwork.legend.trialActive' },
{ color: NODE_COLORS.paidExpired, labelKey: 'admin.referralNetwork.legend.paidExpired' },
{ color: NODE_COLORS.trialExpired, labelKey: 'admin.referralNetwork.legend.trialExpired' },
{ color: NODE_COLORS.partner, labelKey: 'admin.referralNetwork.legend.partner' },
{ color: NODE_COLORS.topReferrer, labelKey: 'admin.referralNetwork.legend.topReferrer' },
{ color: NODE_COLORS.activeReferrer, labelKey: 'admin.referralNetwork.legend.activeReferrer' },
{ color: NODE_COLORS.regular, labelKey: 'admin.referralNetwork.legend.regularUser' },
];
export function NetworkLegend({ className }: NetworkLegendProps) {
@@ -25,27 +29,30 @@ export function NetworkLegend({ className }: NetworkLegendProps) {
<div
className={`rounded-xl border border-dark-700/50 bg-dark-900/80 p-3 backdrop-blur-md ${className ?? ''}`}
>
<h4 className="mb-2 text-[10px] font-medium uppercase tracking-wider text-dark-500">
{t('admin.referralNetwork.legend.title')}
{/* Fill = Subscription status */}
<h4 className="mb-1.5 text-[10px] font-medium uppercase tracking-wider text-dark-500">
{t('admin.referralNetwork.legend.fillTitle')}
</h4>
<div className="space-y-1.5">
{USER_LEGEND_ITEMS.map((item) => (
<div className="space-y-1">
{FILL_ITEMS.map((item) => (
<div key={item.labelKey} className="flex items-center gap-2">
<div
className="h-2.5 w-2.5 shrink-0 rounded-full"
style={{ backgroundColor: item.colorKey }}
style={{ backgroundColor: item.color }}
/>
<span className="text-xs text-dark-300">{t(item.labelKey)}</span>
</div>
))}
{/* Partner → Campaign edge */}
</div>
{/* Edges */}
<div className="mt-2.5 space-y-1">
<div className="flex items-center gap-2">
<div className="h-0.5 w-4 shrink-0 rounded-full" style={{ backgroundColor: '#ff8a65' }} />
<span className="text-xs text-dark-300">
{t('admin.referralNetwork.legend.partnerCampaignEdge')}
</span>
</div>
{/* Campaign node with gradient to represent varying colors */}
<div className="flex items-center gap-2">
<div className="h-2.5 w-2.5 shrink-0 rounded-full" style={gradientStyle} />
<span className="text-xs text-dark-300">

63
src/pages/ReferralNetwork/components/NetworkStats.tsx
View File

@@ -10,38 +10,51 @@ interface NetworkStatsProps {
export function NetworkStats({ data, className }: NetworkStatsProps) {
const { t } = useTranslation();
const stats = [
{
label: t('admin.referralNetwork.stats.totalUsers'),
value: data.total_users.toLocaleString(),
},
{
label: t('admin.referralNetwork.stats.totalReferrers'),
value: data.total_referrers.toLocaleString(),
},
{
label: t('admin.referralNetwork.stats.totalCampaigns'),
value: data.total_campaigns.toLocaleString(),
},
{
label: t('admin.referralNetwork.stats.totalEarnings'),
value: `${formatKopeksToRubles(data.total_earnings_kopeks)} ₽`,
},
];
return (
<div
className={`rounded-xl border border-dark-700/50 bg-dark-900/80 p-2 backdrop-blur-md sm:p-3 ${className ?? ''}`}
>
<div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 sm:gap-3">
{stats.map((stat) => (
<div key={stat.label}>
<div className="grid grid-cols-2 gap-x-4 gap-y-1.5 sm:gap-x-6 sm:gap-y-2">
<div>
<p className="text-[10px] font-medium uppercase tracking-wider text-dark-500">
{stat.label}
{t('admin.referralNetwork.stats.totalUsers')}
</p>
<p className="font-mono text-sm font-semibold text-dark-100">
{data.total_users.toLocaleString()}
</p>
</div>
<div>
<p className="text-[10px] font-medium uppercase tracking-wider text-dark-500">
{t('admin.referralNetwork.stats.totalReferrers')}
</p>
<p className="font-mono text-sm font-semibold text-dark-100">
{data.total_referrers.toLocaleString()}
</p>
</div>
<div>
<p className="text-[10px] font-medium uppercase tracking-wider text-dark-500">
{t('admin.referralNetwork.stats.totalCampaigns')}
</p>
<p className="font-mono text-sm font-semibold text-dark-100">
{data.total_campaigns.toLocaleString()}
</p>
</div>
<div>
<p className="text-[10px] font-medium uppercase tracking-wider text-dark-500">
{t('admin.referralNetwork.stats.subscriptionRevenue')}
</p>
<p className="font-mono text-sm font-semibold text-accent-400">
{formatKopeksToRubles(data.total_subscription_revenue_kopeks)} ₽
</p>
</div>
<div className="col-span-2 border-t border-dark-700/30 pt-1.5">
<p className="text-[10px] font-medium uppercase tracking-wider text-dark-500">
{t('admin.referralNetwork.stats.totalEarnings')}
</p>
<p className="font-mono text-sm font-semibold text-dark-100">
{formatKopeksToRubles(data.total_earnings_kopeks)} ₽
</p>
<p className="font-mono text-sm font-semibold text-dark-100">{stat.value}</p>
</div>
))}
</div>
</div>
);

19
src/pages/ReferralNetwork/components/UserDetailPanel.tsx
View File

@@ -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) {
</h4>
{user.subscription_name ? (
<div>
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-dark-100">{user.subscription_name}</p>
{user.subscription_status && (
<span className="flex items-center gap-1.5 rounded-full bg-dark-700/50 px-2 py-0.5">
<span
className="h-2 w-2 shrink-0 rounded-full"
style={{
backgroundColor: getSubscriptionStatusColor(user.subscription_status),
}}
/>
<span className="text-[10px] font-medium text-dark-300">
{t(
`admin.referralNetwork.user.subscriptionStatus.${user.subscription_status}`,
)}
</span>
</span>
)}
</div>
{user.subscription_end && (
<p className="mt-0.5 text-xs text-dark-400">
{t('admin.referralNetwork.user.validUntil', {

74
src/pages/ReferralNetwork/utils.ts
View File

@@ -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<SubscriptionStatus, string> = {
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.

5
src/types/referralNetwork.ts
View File

@@ -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;
}