feat: enhance NetworkMembershipService with updated member properties and add referral code functionality; improve org chart styling and debug logging

src/FrontOffice.Main/Utilities/NetworkMembershipService.cs

@@ -134,10 +134,11 @@ public class NetworkMembershipService
             Avatar = node.Avatar,
             Position = node.Position,
             Level = node.Level,
-            IsActive = node.HasChildren, // Temporary: use HasChildren as active indicator until proto is updated
-            IsClubActive = false, // Will be populated when proto is updated
-            ActivationWeekNumber = null, // Will be populated when proto is updated
-            JoinedAt = null, // Will be populated when proto is updated
+            IsActive = node.IsActive,
+            IsClubActive = node.IsClubActive,
+            ReferralCode = node.ReferralCode,
+            ActivationWeekNumber = node.ActivationWeekDefinitionId?.ToString(),
+            JoinedAt = node.JoinedAt?.ToDateTime(),
             LeftChild = MapNodeFromProto(node.LeftChild),
             RightChild = MapNodeFromProto(node.RightChild)
         };

src/FrontOffice.Main/wwwroot/css/org-chart.css

@@ -124,6 +124,68 @@
     margin-top: 1px;
 }
 
+/* Referral Code - only for club active members */
+.node-referral {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    margin-top: 2px;
+    padding: 2px 5px;
+    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 8px;
+}
+
+.node-referral:hover {
+    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
+    transform: scale(1.02);
+}
+
+.node-referral .referral-icon {
+    font-size: 9px;
+}
+
+.node-referral .referral-code {
+    color: #2e7d32;
+    font-weight: 600;
+    font-size: 8px;
+    letter-spacing: 0.5px;
+}
+
+/* Club Active indicator */
+.org-node-card.club-active {
+    border-top: 2px solid #4caf50;
+}
+
+.org-node-card.club-active .node-avatar-sm {
+    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
+}
+
+/* Toast notification */
+.org-chart-toast {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background: #323232;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-family: 'Vazirmatn', 'IRANSans', sans-serif;
+    z-index: 10000;
+    opacity: 0;
+    transition: all 0.3s ease;
+    direction: rtl;
+}
+
+.org-chart-toast.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
 /* Legacy Avatar (keep for compatibility) */
 .node-avatar {
     width: 36px;
@@ -480,3 +542,7 @@
     transform: translateX(-50%) translateY(0);
     opacity: 1;
 }
+.node-button-div{
+    justify-content: center;
+    align-items: center;
+}

src/FrontOffice.Main/wwwroot/js/org-chart.js

@@ -30,12 +30,15 @@ window.OrgChart = {
             return;
         }
 
+        // Debug: log first node to see data structure
+        console.log('OrgChart Data Sample:', data[0]);
+
         try {
             this.chart = new d3.OrgChart()
                 .container('#' + containerId)
                 .data(data)
-                .nodeWidth((d) => 130)
-                .nodeHeight((d) => 56)
+                .nodeWidth((d) => 140)
+                .nodeHeight((d) => 70)
                 .childrenMargin((d) => 50)
                 .compactMarginBetween((d) => 15)
                 .compactMarginPair((d) => 15)