From 307302e33d577bb09dc1fd29038db2defed81b9e Mon Sep 17 00:00:00 2001 From: masoodafar-web Date: Tue, 25 Aug 2026 22:39:30 +0330 Subject: [PATCH] feat(organization-chart): enhance organization chart with leg totals and styling improvements - Updated the organization chart to include gold and silver leg totals for better visibility of user metrics. - Modified the CSS for the chart to improve layout and styling, ensuring a more user-friendly interface. - Adjusted JavaScript to dynamically display leg scores, enhancing the overall interactivity of the chart. These changes improve the clarity and usability of the organization chart, providing users with essential metrics at a glance. --- src/FrontOffice.Main/FrontOffice.Main.csproj | 2 +- .../Components/OrganizationChart.razor.cs | 6 ++++- .../Utilities/NetworkMembershipDtos.cs | 23 ++++++++++++++++++- .../Utilities/NetworkMembershipService.cs | 4 ++++ .../wwwroot/css/org-chart.css | 20 ++++++++++++++-- src/FrontOffice.Main/wwwroot/js/org-chart.js | 15 ++++++++++-- 6 files changed, 63 insertions(+), 7 deletions(-) diff --git a/src/FrontOffice.Main/FrontOffice.Main.csproj b/src/FrontOffice.Main/FrontOffice.Main.csproj index f7089c0..b2ac49b 100644 --- a/src/FrontOffice.Main/FrontOffice.Main.csproj +++ b/src/FrontOffice.Main/FrontOffice.Main.csproj @@ -11,7 +11,7 @@ - + diff --git a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs index 4f6ac05..87e6719 100644 --- a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs +++ b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs @@ -110,7 +110,11 @@ public partial class OrganizationChart : IAsyncDisposable activationWeekNumber = n.ActivationWeekNumber, joinedAt = n.JoinedAt, referralCode = n.ReferralCode, - packageName = n.PackageName ?? string.Empty + packageName = n.PackageName ?? string.Empty, + goldLeftLegTotal = n.GoldLeftLegTotal, + goldRightLegTotal = n.GoldRightLegTotal, + silverLeftLegTotal = n.SilverLeftLegTotal, + silverRightLegTotal = n.SilverRightLegTotal }).ToArray(); await JSRuntime.InvokeVoidAsync("OrgChart.init", "org-chart-container", flatData, _dotNetHelper); diff --git a/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs b/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs index 8bbdb37..25a0664 100644 --- a/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs +++ b/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs @@ -26,6 +26,18 @@ public class NetworkNodeDto /// نام پکیج موثر (مثلاً پکیج طلایی / نقره‌ای) /// public string? PackageName { get; set; } + + /// آخرین امتیاز پای چپ پکیج طلایی + public int GoldLeftLegTotal { get; set; } + + /// آخرین امتیاز پای راست پکیج طلایی + public int GoldRightLegTotal { get; set; } + + /// آخرین امتیاز پای چپ پکیج نقره‌ای + public int SilverLeftLegTotal { get; set; } + + /// آخرین امتیاز پای راست پکیج نقره‌ای + public int SilverRightLegTotal { get; set; } } /// @@ -53,6 +65,11 @@ public class FlatNetworkNodeDto /// نام پکیج موثر (مثلاً پکیج طلایی / نقره‌ای) /// public string? PackageName { get; set; } + + public int GoldLeftLegTotal { get; set; } + public int GoldRightLegTotal { get; set; } + public int SilverLeftLegTotal { get; set; } + public int SilverRightLegTotal { get; set; } } /// @@ -92,7 +109,11 @@ public class NetworkTreeDto ActivationWeekNumber = node.ActivationWeekNumber, JoinedAt = node.JoinedAt, ReferralCode = node.ReferralCode, - PackageName = node.PackageName + PackageName = node.PackageName, + GoldLeftLegTotal = node.GoldLeftLegTotal, + GoldRightLegTotal = node.GoldRightLegTotal, + SilverLeftLegTotal = node.SilverLeftLegTotal, + SilverRightLegTotal = node.SilverRightLegTotal }; result.Add(flatNode); diff --git a/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs b/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs index 4983855..6bfa218 100644 --- a/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs +++ b/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs @@ -138,6 +138,10 @@ public class NetworkMembershipService IsClubActive = node.IsClubActive, ReferralCode = node.ReferralCode, PackageName = string.IsNullOrWhiteSpace(node.PackageName) ? null : node.PackageName, + GoldLeftLegTotal = node.GoldLeftLegTotal, + GoldRightLegTotal = node.GoldRightLegTotal, + SilverLeftLegTotal = node.SilverLeftLegTotal, + SilverRightLegTotal = node.SilverRightLegTotal, ActivationWeekNumber = node.ActivationWeekDefinitionId?.ToString(), JoinedAt = node.JoinedAt?.ToDateTime(), LeftChild = MapNodeFromProto(node.LeftChild), diff --git a/src/FrontOffice.Main/wwwroot/css/org-chart.css b/src/FrontOffice.Main/wwwroot/css/org-chart.css index 4ac39ab..b80b895 100644 --- a/src/FrontOffice.Main/wwwroot/css/org-chart.css +++ b/src/FrontOffice.Main/wwwroot/css/org-chart.css @@ -72,10 +72,10 @@ /* Compact Header */ .node-header-compact { display: flex; - align-items: center; + align-items: flex-start; gap: 6px; padding: 6px 8px; - height: 100%; + min-height: 100%; background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); } @@ -141,6 +141,22 @@ max-width: 120px; } +/* D3: طلایی / نقره‌ای — پای چپ و راست */ +.node-leg-scores { + margin-top: 3px; + line-height: 1.25; + font-size: 8px; + font-weight: 600; +} + +.node-leg-scores .leg-score-line.gold { + color: #b8860b; +} + +.node-leg-scores .leg-score-line.silver { + color: #607d8b; +} + /* Referral Code - only for club active members */ .node-referral { display: flex; diff --git a/src/FrontOffice.Main/wwwroot/js/org-chart.js b/src/FrontOffice.Main/wwwroot/js/org-chart.js index 0de2b93..9fb6c67 100644 --- a/src/FrontOffice.Main/wwwroot/js/org-chart.js +++ b/src/FrontOffice.Main/wwwroot/js/org-chart.js @@ -37,8 +37,8 @@ window.OrgChart = { this.chart = new d3.OrgChart() .container('#' + containerId) .data(data) - .nodeWidth((d) => 140) - .nodeHeight((d) => 85) + .nodeWidth((d) => 150) + .nodeHeight((d) => 112) .childrenMargin((d) => 50) .compactMarginBetween((d) => 15) .compactMarginPair((d) => 15) @@ -80,6 +80,16 @@ window.OrgChart = { ` : ''; + const gL = data.goldLeftLegTotal ?? 0; + const gR = data.goldRightLegTotal ?? 0; + const sL = data.silverLeftLegTotal ?? 0; + const sR = data.silverRightLegTotal ?? 0; + const legScoresHtml = ` +
+
طلایی: چپ ${gL} · راست ${gR}
+
نقره‌ای: چپ ${sL} · راست ${sR}
+
`; + return `
@@ -88,6 +98,7 @@ window.OrgChart = {
${data.fullName || 'بدون نام'}
L${data.level || 0}${!isRoot ? ' • ' + (data.position === 'Left' ? 'چپ' : 'راست') : ''}
${packageBadge} + ${legScoresHtml} ${referralCodeHtml}