From 2bb856f2fd71fda503665e173c79ac3c5c0bfdd9 Mon Sep 17 00:00:00 2001
From: PhuocNTB <phuocntb@mieusoft.com>
Date: Tue, 7 Jul 2026 06:52:33 +0700
Subject: [PATCH] fix ui

---
 management/src/components/StudentAvatar.tsx   |  46 ++-
 .../src/components/StudentDetailModal.tsx     |   6 +-
 .../src/components/WorkspaceSeatingChart.tsx  | 119 ++------
 management/src/index.css                      | 266 ++++++++++++++++++
 4 files changed, 325 insertions(+), 112 deletions(-)

diff --git a/management/src/components/StudentAvatar.tsx b/management/src/components/StudentAvatar.tsx
index 92e6f91..e89a2a4 100644
--- a/management/src/components/StudentAvatar.tsx
+++ b/management/src/components/StudentAvatar.tsx
@@ -12,13 +12,25 @@ interface StudentAvatarProps {
   avatar?: string | null;
   isOnline?: boolean;
   size?: number;
+  showStatusBadge?: boolean;
 }
 
+export const StudentOnlineBadge: React.FC<{
+  isOnline: boolean;
+  size?: 'sm' | 'md';
+}> = ({ isOnline, size = 'sm' }) => (
+  <span className={`student-online-badge ${isOnline ? 'online' : 'offline'} student-online-badge--${size}`}>
+    <span className="student-online-badge-dot" aria-hidden />
+    {isOnline ? 'Online' : 'Offline'}
+  </span>
+);
+
 export const StudentAvatar: React.FC<StudentAvatarProps> = ({
   fullName,
   avatar,
   isOnline = false,
   size = 48,
+  showStatusBadge = true,
 }) => {
   const [imgFailed, setImgFailed] = useState(false);
   const avatarUrl = normalizeAvatarUrl(avatar);
@@ -30,20 +42,28 @@ export const StudentAvatar: React.FC<StudentAvatarProps> = ({
   }, [avatarUrl]);
 
   return (
-    <div
-      className={`student-workspace-avatar ${isOnline ? 'online' : ''} ${showImage ? 'has-image' : ''}`}
-      style={{ width: size, height: size, fontSize: size * 0.38 }}
-    >
-      {showImage ? (
-        <img
-          src={avatarUrl}
-          alt={fullName}
-          className="student-avatar-img"
-          referrerPolicy="no-referrer"
-          onError={() => setImgFailed(true)}
+    <div className="student-avatar-wrap" style={{ width: size, height: size }}>
+      <div
+        className={`student-workspace-avatar ${isOnline ? 'online' : 'offline'} ${showImage ? 'has-image' : ''}`}
+        style={{ width: size, height: size, fontSize: size * 0.38 }}
+      >
+        {showImage ? (
+          <img
+            src={avatarUrl}
+            alt={fullName}
+            className="student-avatar-img"
+            referrerPolicy="no-referrer"
+            onError={() => setImgFailed(true)}
+          />
+        ) : (
+          initial
+        )}
+      </div>
+      {showStatusBadge && (
+        <span
+          className={`student-avatar-status-ring ${isOnline ? 'online' : 'offline'}`}
+          title={isOnline ? 'Đang online' : 'Đang offline'}
         />
-      ) : (
-        initial
       )}
     </div>
   );
diff --git a/management/src/components/StudentDetailModal.tsx b/management/src/components/StudentDetailModal.tsx
index 6646171..5f92f96 100644
--- a/management/src/components/StudentDetailModal.tsx
+++ b/management/src/components/StudentDetailModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { StudentItem, StudentSessionLogItem } from '../api';
-import { StudentAvatar } from './StudentAvatar';
+import { StudentAvatar, StudentOnlineBadge } from './StudentAvatar';
 import { ProctorStreamPanels } from './ProctorStreamPanels';
 
 interface StudentDetailModalProps {
@@ -48,8 +48,8 @@ export const StudentDetailModal: React.FC<StudentDetailModalProps> = ({
             <div className="student-detail-meta">
               <div className="student-meta-item">
                 <span className="student-meta-label">Trạng thái</span>
-                <span className={`student-meta-value ${isOnline ? 'online' : ''}`}>
-                  {isOnline ? '● Online' : '○ Offline'}
+                <span className="student-meta-value">
+                  <StudentOnlineBadge isOnline={isOnline} size="md" />
                 </span>
               </div>
               {student.phone && (
diff --git a/management/src/components/WorkspaceSeatingChart.tsx b/management/src/components/WorkspaceSeatingChart.tsx
index e3cd364..282a35d 100644
--- a/management/src/components/WorkspaceSeatingChart.tsx
+++ b/management/src/components/WorkspaceSeatingChart.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import type { SeatingTemplate } from './SeatingTemplatesSection';
-import { StudentAvatar } from './StudentAvatar';
+import { StudentAvatar, StudentOnlineBadge } from './StudentAvatar';
 
 interface WorkspaceSeatingChartProps {
   workspaceId: string; // 'class-<id>' or 'exam-<id>'
@@ -330,30 +330,8 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
             onDragLeave={handleDragLeave}
             onDrop={(e) => !isLocked && handleDrop(e, r, c)}
             onClick={() => isEditingStructure && handleToggleCellLock(r, c)}
-            className={`seating-grid-cell ${isLocked ? 'locked' : ''} ${isHovered ? 'dragover' : ''}`}
-            style={{
-              minHeight: '80px',
-              border: isEditingStructure ? '1.5px dashed var(--border-color)' : '1px solid var(--border-color)',
-              borderRadius: '8px',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center',
-              padding: '0.4rem',
-              position: 'relative',
-              backgroundColor: isLocked
-                ? '#e5e7eb'
-                : isHovered
-                ? '#dbeafe'
-                : student
-                ? '#ffffff'
-                : '#f9fafb',
-              color: isLocked ? '#9ca3af' : 'inherit',
-              cursor: isEditingStructure ? 'pointer' : student ? 'grab' : 'default',
-              boxShadow: student ? 'var(--shadow-sm)' : 'none',
-              transition: 'var(--transition)',
-              borderColor: isHovered ? 'var(--accent)' : isLocked ? '#e5e7eb' : 'var(--border-color)',
-            }}
+            className={`seating-grid-cell ${isLocked ? 'locked' : ''} ${isHovered ? 'dragover' : ''} ${student && !isLocked ? (isOnline ? 'occupied-online' : 'occupied-offline') : ''}`}
+            style={isEditingStructure ? { border: '1.5px dashed var(--border-color)', cursor: 'pointer' } : undefined}
             draggable={!!student && !isEditingStructure}
             onDragStart={(e) => student && handleDragStart(e, `cell:${key}`)}
           >
@@ -363,8 +341,8 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
                 <span style={{ fontSize: '0.72rem', color: '#9ca3af', fontWeight: 600 }}>Khóa</span>
               </div>
             ) : student ? (
-              <div 
-                style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', width: '100%', cursor: (!isEditingStructure && onStudentClick) ? 'pointer' : 'inherit' }}
+              <div
+                className={`seating-seat-card ${!isEditingStructure && onStudentClick ? 'seating-seat-card--clickable' : ''}`}
                 onClick={() => {
                   if (!isEditingStructure && onStudentClick) {
                     onStudentClick(student.rkId);
@@ -373,63 +351,34 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
               >
                 {!isEditingStructure && (
                   <button
+                    type="button"
+                    className="seating-seat-unseat-btn"
                     onClick={(e) => { e.stopPropagation(); handleUnseat(key); }}
-                    style={{
-                      position: 'absolute',
-                      top: '2px',
-                      right: '2px',
-                      border: 'none',
-                      background: '#fee2e2',
-                      color: 'var(--danger)',
-                      width: '18px',
-                      height: '18px',
-                      borderRadius: '50%',
-                      fontSize: '0.65rem',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      cursor: 'pointer',
-                      fontWeight: 700,
-                    }}
                     title="Cho học viên rời chỗ"
                   >
                     &times;
                   </button>
                 )}
-                <StudentAvatar fullName={student.fullName} avatar={student.avatar} isOnline={isOnline} size={32} />
-                <span style={{ fontSize: '0.75rem', fontWeight: 700, marginTop: '4px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', padding: '0 2px' }}>
+                <StudentAvatar fullName={student.fullName} avatar={student.avatar} isOnline={isOnline} size={40} />
+                <span className="seating-seat-name">
                   {student.fullName.split(' ').pop()}
                 </span>
-                <span style={{ fontSize: '0.65rem', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>
+                <span className="seating-seat-code">
                   {student.studentCode}
                 </span>
+                {!isEditingStructure && <StudentOnlineBadge isOnline={isOnline} size="sm" />}
                 {student.paperTitle && (
-                  <span 
-                    style={{ 
-                      fontSize: '0.62rem', 
-                      background: 'var(--accent-light)', 
-                      color: 'var(--accent)', 
-                      padding: '1px 4px', 
-                      borderRadius: '4px', 
-                      marginTop: '2px', 
-                      fontWeight: 600,
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      maxWidth: '100%'
-                    }}
-                    title={`Đề: ${student.paperTitle}`}
-                  >
+                  <span className="seating-seat-paper" title={`Đề: ${student.paperTitle}`}>
                     📄 {student.paperTitle}
                   </span>
                 )}
               </div>
             ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', opacity: 0.4 }}>
-                <span style={{ fontSize: '0.72rem', color: 'var(--text-muted)', fontWeight: 600 }}>
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', opacity: 0.4, gap: '0.15rem' }}>
+                <span className="seating-seat-empty-label">
                   H{r + 1}-C{c + 1}
                 </span>
-                <span style={{ fontSize: '0.65rem', color: 'var(--text-muted)' }}>Trống</span>
+                <span className="seating-seat-empty-seat">Trống</span>
               </div>
             )}
           </div>
@@ -458,18 +407,9 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
 
           {/* Grid Container */}
           <div
+            className="seating-grid-board"
             style={{
-              display: 'grid',
-              gridTemplateColumns: `repeat(${layout.cols}, minmax(75px, 1fr))`,
-              gap: '8px',
-              flex: 1,
-              padding: '8px',
-              backgroundColor: 'var(--bg-app)',
-              borderRadius: 'var(--radius-md)',
-              border: '1px solid var(--border-color)',
-              alignContent: 'start',
-              overflow: 'auto',
-              minHeight: 0,
+              gridTemplateColumns: `repeat(${layout.cols}, minmax(var(--seating-cell-min-width), 1fr))`,
             }}
           >
             {gridItems}
@@ -709,8 +649,8 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
                                   {seatLabel}
                                 </span>
                               </td>
-                              <td style={{ color: isOnline ? 'var(--success)' : 'var(--text-muted)', fontWeight: 700 }}>
-                                {isOnline ? 'Online' : 'Offline'}
+                              <td>
+                                <StudentOnlineBadge isOnline={isOnline} size="md" />
                               </td>
                               <td style={{ textAlign: 'right' }}>
                                 <button
@@ -780,31 +720,18 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
                         draggable
                         onDragStart={(e) => handleDragStart(e, `unseated:${s.rkId}`)}
                         onClick={() => onStudentClick && onStudentClick(s.rkId)}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '0.5rem',
-                          padding: '0.5rem',
-                          border: '1px solid var(--border-color)',
-                          borderRadius: '8px',
-                          backgroundColor: '#ffffff',
-                          cursor: onStudentClick ? 'pointer' : 'grab',
-                          transition: 'var(--transition)',
-                          userSelect: 'none',
-                          boxShadow: 'var(--shadow-sm)',
-                        }}
-                        className="student-drag-item"
+                        className={`seating-unseated-card ${isOnline ? 'online' : 'offline'} ${onStudentClick ? 'seating-unseated-card--clickable' : ''} student-drag-item`}
                       >
-                        <StudentAvatar fullName={s.fullName} avatar={s.avatar} isOnline={isOnline} size={28} />
-                        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', flex: 1 }}>
+                        <StudentAvatar fullName={s.fullName} avatar={s.avatar} isOnline={isOnline} size={32} />
+                        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', flex: 1, minWidth: 0, gap: '0.2rem' }}>
                           <span style={{ fontSize: '0.8rem', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                             {s.fullName}
                           </span>
                           <span style={{ fontSize: '0.7rem', color: 'var(--text-secondary)', fontFamily: 'monospace', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                             {s.studentCode} {s.paperTitle && ` · 📄 ${s.paperTitle}`}
                           </span>
+                          <StudentOnlineBadge isOnline={isOnline} size="sm" />
                         </div>
-                        <span className={isOnline ? 'pulse-dot-online' : 'status-badge-offline'} style={{ width: '6px', height: '6px' }} />
                       </div>
                     );
                   })
diff --git a/management/src/index.css b/management/src/index.css
index 61966c0..17b2c71 100644
--- a/management/src/index.css
+++ b/management/src/index.css
@@ -2468,17 +2468,283 @@ input:checked + .slider:before {
   border-color: var(--border-color);
 }
 
+.student-workspace-avatar.offline.has-image {
+  border-color: #cbd5e1;
+  filter: grayscale(0.15);
+}
+
+.student-workspace-avatar.offline:not(.has-image) {
+  background: #f1f5f9;
+  color: #94a3b8;
+  border-color: #e2e8f0;
+}
+
+.student-workspace-avatar.online.has-image,
 .student-status-card.online .student-workspace-avatar.has-image {
   border-color: var(--success);
   box-shadow: 0 0 0 2px rgba(13, 159, 110, 0.2);
 }
 
+.student-workspace-avatar.online:not(.has-image),
 .student-status-card.online .student-workspace-avatar:not(.has-image) {
   background: var(--accent);
   color: white;
   border-color: var(--accent);
 }
 
+.student-avatar-wrap {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.student-avatar-status-ring {
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
+  z-index: 2;
+}
+
+.student-avatar-status-ring.online {
+  background: var(--success);
+  animation: pulse-online 1.8s infinite ease-in-out;
+}
+
+.student-avatar-status-ring.offline {
+  background: #94a3b8;
+}
+
+.student-online-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border-radius: 999px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.student-online-badge--sm {
+  padding: 0.24rem 0.5rem;
+  font-size: 0.6rem;
+}
+
+.student-online-badge--md {
+  padding: 0.28rem 0.6rem;
+  font-size: 0.68rem;
+}
+
+.student-online-badge.online {
+  background: rgba(13, 159, 110, 0.12);
+  color: #0d9f6e;
+  border: 1px solid rgba(13, 159, 110, 0.22);
+}
+
+.student-online-badge.offline {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+}
+
+.student-online-badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.student-online-badge.online .student-online-badge-dot {
+  background: var(--success);
+  box-shadow: 0 0 0 2px rgba(13, 159, 110, 0.2);
+}
+
+.student-online-badge.offline .student-online-badge-dot {
+  background: #94a3b8;
+}
+
+.seating-grid-cell.occupied-online {
+  border-color: rgba(13, 159, 110, 0.38) !important;
+  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 55%) !important;
+  box-shadow: 0 2px 8px rgba(13, 159, 110, 0.1) !important;
+}
+
+.seating-grid-cell.occupied-offline {
+  border-color: #e2e8f0 !important;
+  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 55%) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.seating-grid-board {
+  --seating-cell-min-width: 136px;
+  --seating-cell-min-height: 156px;
+  display: grid;
+  gap: 10px;
+  flex: 1;
+  padding: 10px;
+  background-color: var(--bg-app);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  align-content: start;
+  overflow: auto;
+  min-height: 0;
+}
+
+.seating-grid-cell {
+  min-height: var(--seating-cell-min-height);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0.55rem 0.45rem 0.5rem;
+  position: relative;
+  transition: var(--transition);
+}
+
+.seating-grid-cell.locked {
+  background: #e5e7eb;
+  color: #9ca3af;
+}
+
+.seating-grid-cell.dragover {
+  background: #dbeafe !important;
+  border-color: var(--accent) !important;
+}
+
+.seating-grid-cell:not(.locked):not(.occupied-online):not(.occupied-offline):not(.dragover) {
+  background: #f9fafb;
+}
+
+.seating-grid-cell:not(.locked) {
+  cursor: default;
+}
+
+.seating-grid-cell.occupied-online,
+.seating-grid-cell.occupied-offline {
+  cursor: grab;
+}
+
+.seating-seat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  gap: 0.28rem;
+}
+
+.seating-seat-card--clickable {
+  cursor: pointer;
+}
+
+.seating-seat-name {
+  font-size: 0.8rem;
+  font-weight: 700;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  padding: 0 2px;
+  line-height: 1.2;
+}
+
+.seating-seat-code {
+  font-size: 0.68rem;
+  color: var(--text-secondary);
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  line-height: 1.2;
+}
+
+.seating-seat-paper {
+  font-size: 0.64rem;
+  background: var(--accent-light);
+  color: var(--accent);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-top: 1px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  line-height: 1.25;
+}
+
+.seating-seat-empty-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.seating-seat-empty-seat {
+  font-size: 0.68rem;
+  color: var(--text-muted);
+}
+
+.seating-seat-unseat-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  border: none;
+  background: #fee2e2;
+  color: var(--danger);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.seating-unseated-card {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.6rem;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: #fff;
+  cursor: grab;
+  transition: var(--transition);
+  user-select: none;
+  box-shadow: var(--shadow-sm);
+}
+
+.seating-unseated-card.online {
+  border-color: rgba(13, 159, 110, 0.28);
+  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 70%);
+}
+
+.seating-unseated-card.offline {
+  border-color: #e2e8f0;
+  background: #f8fafc;
+}
+
+.seating-unseated-card:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+
+.seating-unseated-card--clickable {
+  cursor: pointer;
+}
+
 .app-suggestion-badge {
   font-size: 0.72rem;
   padding: 0.2rem 0.5rem;