From 8252e408b647f0d2e7972d23b325c12f2ca8666e Mon Sep 17 00:00:00 2001
From: masoodafar-web <masoud.afarin.moghaddam@outlook.com>
Date: Fri, 4 Sep 2026 06:48:24 +0330
Subject: [PATCH] feat(organization-chart): update registration date handling
 and styling

- Modified the OrganizationChart component to convert and display the registration date in Jalali format, enhancing user understanding of the date information.
- Updated the NetworkMembershipDtos class to include a comment in Persian for the JoinedAt property, clarifying its purpose.
- Adjusted the NetworkMembershipService to utilize the UserCreated date when available, improving data accuracy.
- Introduced new CSS styles for the registration date display, ensuring better visibility and presentation in the organization chart.

These changes enhance the clarity and usability of the organization chart by providing accurate registration date information in a user-friendly format.
---
 .../Profile/Components/OrganizationChart.razor.cs      |  5 ++++-
 .../Utilities/NetworkMembershipDtos.cs                 |  2 +-
 .../Utilities/NetworkMembershipService.cs              |  3 ++-
 src/FrontOffice.Main/wwwroot/css/org-chart.css         | 10 ++++++++++
 src/FrontOffice.Main/wwwroot/js/org-chart.js           |  5 +++--
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs
index 4f6ac05..22e34b0 100644
--- a/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs
+++ b/src/FrontOffice.Main/Pages/Profile/Components/OrganizationChart.razor.cs
@@ -1,3 +1,4 @@
+using DateTimeConverterCL;
 using FrontOffice.Main.Utilities;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
@@ -108,7 +109,9 @@ public partial class OrganizationChart : IAsyncDisposable
                 isActive = n.IsActive,
                 isClubActive = n.IsClubActive,
                 activationWeekNumber = n.ActivationWeekNumber,
-                joinedAt = n.JoinedAt,
+                registeredAt = n.JoinedAt.HasValue
+                    ? n.JoinedAt.Value.ToLocalTime().MiladiToJalali()
+                    : "",
                 referralCode = n.ReferralCode,
                 packageName = n.PackageName ?? string.Empty
             }).ToArray();
diff --git a/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs b/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs
index a6c2128..54646a9 100644
--- a/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs
+++ b/src/FrontOffice.Main/Utilities/NetworkMembershipDtos.cs
@@ -14,7 +14,7 @@ public class NetworkNodeDto
     public NetworkNodeDto? RightChild { get; set; }
     public int Level { get; set; }
     public bool IsActive { get; set; } = true;
-    public DateTime? JoinedAt { get; set; }
+    public DateTime? JoinedAt { get; set; } // تاریخ ثبت‌نام (UserCreated)
     public bool IsClubActive { get; set; }
     public string? ActivationWeekNumber { get; set; }
     /// <summary>
diff --git a/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs b/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs
index eb225d3..92e11df 100644
--- a/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs
+++ b/src/FrontOffice.Main/Utilities/NetworkMembershipService.cs
@@ -147,7 +147,8 @@ public class NetworkMembershipService
             SilverLeftLegTotal = node.SilverLeftLegTotal,
             SilverRightLegTotal = node.SilverRightLegTotal,
             ActivationWeekNumber = node.ActivationWeekDefinitionId?.ToString(),
-            JoinedAt = node.JoinedAt?.ToDateTime(),
+            JoinedAt = node.UserCreated?.ToDateTime()
+                ?? node.JoinedAt?.ToDateTime(),
             LeftChild = MapNodeFromProto(node.LeftChild),
             RightChild = MapNodeFromProto(node.RightChild)
         };
diff --git a/src/FrontOffice.Main/wwwroot/css/org-chart.css b/src/FrontOffice.Main/wwwroot/css/org-chart.css
index 8a57707..b5124d8 100644
--- a/src/FrontOffice.Main/wwwroot/css/org-chart.css
+++ b/src/FrontOffice.Main/wwwroot/css/org-chart.css
@@ -118,6 +118,16 @@
     line-height: 1.2;
 }
 
+.node-registered-at {
+    font-size: 8px;
+    color: #6c757d;
+    margin-top: 1px;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .node-level-sm {
     font-size: 9px;
     color: #6c757d;
diff --git a/src/FrontOffice.Main/wwwroot/js/org-chart.js b/src/FrontOffice.Main/wwwroot/js/org-chart.js
index 0de2b93..19c56f5 100644
--- a/src/FrontOffice.Main/wwwroot/js/org-chart.js
+++ b/src/FrontOffice.Main/wwwroot/js/org-chart.js
@@ -38,7 +38,7 @@ window.OrgChart = {
                 .container('#' + containerId)
                 .data(data)
                 .nodeWidth((d) => 140)
-                .nodeHeight((d) => 85)
+                .nodeHeight((d) => 98)
                 .childrenMargin((d) => 50)
                 .compactMarginBetween((d) => 15)
                 .compactMarginPair((d) => 15)
@@ -86,6 +86,7 @@ window.OrgChart = {
                                 <div class="node-avatar-sm">${firstChar}</div>
                                 <div class="node-info">
                                     <div class="node-name-sm">${data.fullName || 'بدون نام'}</div>
+                                    ${data.registeredAt ? `<div class="node-registered-at">${data.registeredAt}</div>` : ''}
                                     <div class="node-level-sm">L${data.level || 0}${!isRoot ? ' • ' + (data.position === 'Left' ? 'چپ' : 'راست') : ''}</div>
                                     ${packageBadge}
                                     ${referralCodeHtml}
@@ -296,7 +297,7 @@ window.OrgChart = {
                 isActive: node.isActive !== false,
                 isClubActive: node.isClubActive || false,
                 activationWeekNumber: node.activationWeekNumber,
-                joinedAt: node.joinedAt
+                registeredAt: node.registeredAt || node.joinedAt || ''
             };
             
             result.push(flatNode);