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.

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();

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>

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

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;

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);