...

Presentation/HushianWebApp/Pages/FromUserSide/UserCP.razor

@@ -85,14 +85,30 @@
                         else
                         {
                             <div class="d-flex justify-content-center align-items-center flex-column" style="height: 80%;">
-
                                 <Spinner Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@chatloading" />
                                 <p style="margin-top: 15px; font-size: 1.5rem; color: #0d6efd; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
                                     هوشیان
                                 </p>
+                                
+                                @if (CompanyGroups != null && CompanyGroups.Any())
+                                {
+                                    <div class="groups-container mt-4">
+                                        <h6 class="text-center mb-3 text-muted">انتخاب گروه:</h6>
+                                        <div class="groups-grid">
+                                            @foreach (var group in CompanyGroups)
+                                            {
+                                                <div class="group-card @(GroupID == group.ID ? "selected" : "")" 
+                                                     @onclick="() => SelectGroup(group.ID)">
+                                                    <div class="group-card-content">
+                                                        <Icon Name="IconName.People" Class="group-icon" />
+                                                        <span class="group-name">@group.Name</span>
+                                                    </div>
+                                                </div>
+                                            }
+                                        </div>
+                                    </div>
+                                }
                             </div>
-
-
                         }
 
                     </div>
@@ -302,6 +318,12 @@
         IsLogin = false;
         StateHasChanged();
     }
+    
+    async Task SelectGroup(int groupId)
+    {
+        GroupID = groupId;
+        StateHasChanged();
+    }
 }
 <style>
     .chat-bubble {
@@ -779,6 +801,160 @@
         background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
     }
 
+    /* Group selection cards styling */
+    .groups-container {
+        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
+    }
+
+    .groups-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 0.75rem;
+        padding: 0.75rem;
+    }
+
+    .group-card {
+        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+        border: 2px solid #e9ecef;
+        border-radius: 12px;
+        padding: 1rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
+        position: relative;
+        overflow: hidden;
+    }
+
+        .group-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            border-radius: 15px;
+        }
+
+        .group-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 16px rgba(13, 110, 253, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+            border-color: #0d6efd;
+        }
+
+            .group-card:hover::before {
+                opacity: 1;
+            }
+
+        .group-card.selected {
+            background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
+            border-color: #0d6efd;
+            color: white;
+            box-shadow: 0 8px 16px rgba(13, 110, 253, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+            .group-card.selected::before {
+                opacity: 0;
+            }
+
+            .group-card.selected:hover {
+                background: linear-gradient(135deg, #0b5ed7 0%, #0a4b9e 100%);
+                transform: translateY(-2px);
+            }
+
+    .group-card-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        text-align: center;
+        position: relative;
+        z-index: 1;
+    }
+
+    .group-icon {
+        font-size: 1.5rem;
+        color: #0d6efd;
+        transition: all 0.3s ease;
+    }
+
+    .group-card:hover .group-icon {
+        color: #0b5ed7;
+        transform: scale(1.1);
+    }
+
+    .group-card.selected .group-icon {
+        color: white;
+    }
+
+        .group-card.selected:hover .group-icon {
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+    .group-name {
+        font-weight: 600;
+        font-size: 0.875rem;
+        color: #495057;
+        transition: all 0.3s ease;
+    }
+
+    .group-card:hover .group-name {
+        color: #0d6efd;
+    }
+
+    .group-card.selected .group-name {
+        color: white;
+    }
+
+        .group-card.selected:hover .group-name {
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+    /* Responsive design for group cards */
+    @@media (max-width: 768px) {
+        .groups-grid {
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 0.5rem;
+            padding: 0.5rem;
+        }
+
+        .group-card {
+            padding: 0.75rem;
+        }
+
+        .group-icon {
+            font-size: 1.25rem;
+        }
+
+        .group-name {
+            font-size: 0.8rem;
+        }
+    }
+
+    @@media (max-width: 480px) {
+        .groups-grid {
+            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+            gap: 0.5rem;
+            padding: 0.5rem;
+        }
+
+        .group-card {
+            padding: 0.5rem;
+        }
+        
+        .group-icon {
+            font-size: 1rem;
+        }
+        
+        .group-name {
+            font-size: 0.75rem;
+        }
+    }
+
 </style>
 <script>