group interview

Frontend/src/app/pages/admin/group-interview/group-interview.css

@@ -56,21 +56,26 @@
 .meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
 .meta-item .material-symbols-rounded { font-size: 16px; color: var(--text-muted); }
 
-/* Candidate chips row */
-.candidate-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
-.candidate-chip {
-  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
-  justify-content: center; font-size: 12px; font-weight: 700; color: #fff;
-  border: 2px solid var(--bg-card); background: #667eea;
-  transition: transform 0.15s;
-}
-.candidate-chip:hover { transform: scale(1.15); z-index: 1; }
-.candidate-chip.badge-warning { background: #f59e0b; }
-.candidate-chip.badge-info    { background: #3b82f6; }
-.candidate-chip.badge-success { background: #22c55e; }
-.candidate-chip.badge-purple  { background: #a855f7; }
-
-.iv-card-bottom { display: flex; justify-content: flex-end; }
+/* Candidate pills row */
+.candidate-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
+.candidate-pill {
+  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
+  border-radius: 20px; background: var(--bg-hover); border: 1px solid var(--border-color);
+  transition: all 0.2s;
+}
+.candidate-pill:hover { border-color: rgba(102,126,234,0.4); transform: translateY(-1px); }
+.cp-avatar {
+  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
+  justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: #667eea;
+}
+.cp-name { font-size: 12px; font-weight: 500; color: var(--text-primary); }
+
+.candidate-pill.badge-warning .cp-avatar { background: #f59e0b; }
+.candidate-pill.badge-info .cp-avatar    { background: #3b82f6; }
+.candidate-pill.badge-success .cp-avatar { background: #22c55e; }
+.candidate-pill.badge-purple .cp-avatar  { background: #a855f7; }
+
+.iv-card-bottom { display: flex; justify-content: flex-start; margin-top: 10px; }
 .status-summary { font-size: 12px; color: var(--text-muted); font-style: italic; }
 
 /* ═══════════════════════════════════════════════════════

Frontend/src/app/pages/admin/group-interview/group-interview.html

@@ -94,11 +94,12 @@
             </div>
 
             <!-- Candidate progress chips -->
-            <div class="candidate-chips">
+            <div class="candidate-pills">
               @for (m of g.members; track m._id) {
-                <span class="candidate-chip" [ngClass]="getStatusClass(m.status)" [title]="m.candidateId?.name + ' — ' + formatStatus(m.status)">
-                  {{ m.candidateId?.name?.charAt(0)?.toUpperCase() }}
-                </span>
+                <div class="candidate-pill" [ngClass]="getStatusClass(m.status)" [title]="'Status: ' + formatStatus(m.status)">
+                  <div class="cp-avatar">{{ m.candidateId?.name ? m.candidateId.name.charAt(0).toUpperCase() : '?' }}</div>
+                  <span class="cp-name">{{ m.candidateId?.name || 'Unknown Candidate' }}</span>
+                </div>
               }
             </div>
 
@@ -433,15 +434,10 @@
                       <span class="step-dot"></span><span class="step-label">Done</span>
                     </div>
                   </div>
-                </div>
-                <div class="candidate-row-right">
-                  <span class="badge" [ngClass]="getStatusClass(m.status)">{{ formatStatus(m.status) }}</span>
-                  @if (m.finalDecision !== 'pending') {
-                    <span class="badge" [ngClass]="getDecisionClass(m.finalDecision)">{{ formatDecision(m.finalDecision) }}</span>
-                  }
-                  <!-- Quiz scores -->
+
+                  <!-- Quiz scores aligned to left -->
                   @if (m.quizzes?.length > 0) {
-                    <div class="quiz-scores-inline">
+                    <div class="quiz-scores-inline" style="margin-top: 14px;">
                       @for (q of m.quizzes; track q.quizId) {
                         <span class="quiz-score-chip" [class.completed]="q.completed">
                           {{ q.title }}: {{ q.completed ? q.score + '/' + q.totalMarks : 'Pending' }}
@@ -449,8 +445,14 @@
                       }
                     </div>
                   }
+                </div>
+                <div class="candidate-row-right">
+                  <span class="badge" [ngClass]="getStatusClass(m.status)">{{ formatStatus(m.status) }}</span>
+                  @if (m.finalDecision !== 'pending') {
+                    <span class="badge" [ngClass]="getDecisionClass(m.finalDecision)">{{ formatDecision(m.finalDecision) }}</span>
+                  }
                   <!-- Decision buttons (admin) -->
-                  @if (authService.getUserRole() === 'admin' && m.status !== 'completed') {
+                  @if (authService.getUserRole() === 'admin' && m.status === 'evaluation') {
                     <div class="mini-decision-btns">
                       <button class="mini-btn success" (click)="setDecision(m._id, 'accepted'); $event.stopPropagation()">Accept</button>
                       <button class="mini-btn danger"  (click)="setDecision(m._id, 'rejected'); $event.stopPropagation()">Reject</button>