feat: add referral network graph visualization page

Interactive Sigma.js + graphology graph with ForceAtlas2 web worker
layout, campaign/user node coloring, filters via nodeReducer pattern,
search highlighting, user/campaign detail side panels, and 4-locale
translations. Dependencies: sigma v3, graphology, graphology-layout-forceatlas2.
This commit is contained in:
Fringg
2026-03-19 07:56:01 +03:00
parent 84f0e4e9b4
commit 235eaec85f
23 changed files with 2126 additions and 8 deletions

View File

@@ -248,6 +248,17 @@ const ArrowsUpDownIcon = () => (
</svg>
);
const NetworkGraphIcon = () => (
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
/>
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none" />
</svg>
);
const ChevronRightIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
@@ -569,6 +580,13 @@ export default function AdminPanel() {
description: t('admin.panel.withdrawalsDesc'),
permission: 'withdrawals:read',
},
{
to: '/admin/referral-network',
icon: <NetworkGraphIcon />,
title: t('admin.nav.referralNetwork'),
description: t('admin.panel.referralNetworkDesc'),
permission: 'stats:read',
},
],
},
{