fix ui

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