core v1

management/src/components/StudentDetailModal.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import type { StudentItem, StudentSessionLogItem } from '../api';
+import { StudentAvatar } from './StudentAvatar';
+import { ProctorStreamPanels } from './ProctorStreamPanels';
+
+interface StudentDetailModalProps {
+  student: StudentItem;
+  isOnline: boolean;
+  sessionLog?: StudentSessionLogItem | null;
+  onClose: () => void;
+}
+
+const formatDuration = (totalSeconds: number) => {
+  const hrs = Math.floor(totalSeconds / 3600);
+  const mins = Math.floor((totalSeconds % 3600) / 60);
+  const secs = totalSeconds % 60;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+};
+
+export const StudentDetailModal: React.FC<StudentDetailModalProps> = ({
+  student,
+  isOnline,
+  sessionLog,
+  onClose,
+}) => {
+  const [showProctor, setShowProctor] = useState(false);
+
+  return (
+    <div className="modal-overlay student-detail-overlay" onClick={onClose}>
+      <div className={`modal-container student-detail-modal ${showProctor ? 'student-detail-modal--proctor' : ''}`} onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <div className="student-detail-header">
+            <StudentAvatar fullName={student.fullName} avatar={student.avatar} isOnline={isOnline} size={56} />
+            <div>
+              <h2 className="modal-title" style={{ margin: 0 }}>{student.fullName}</h2>
+              <p style={{ margin: '4px 0 0', color: 'var(--text-muted)', fontSize: '0.85rem' }}>
+                <span style={{ fontFamily: 'monospace', fontWeight: 700, color: 'var(--accent)' }}>{student.studentCode}</span>
+                {student.email && <> · {student.email}</>}
+              </p>
+            </div>
+          </div>
+          <button type="button" className="btn btn-secondary" onClick={onClose}>Đóng</button>
+        </div>
+
+        <div className="student-detail-body">
+          <div className="student-detail-info">
+            <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>
+              </div>
+              {student.phone && (
+                <div className="student-meta-item">
+                  <span className="student-meta-label">Điện thoại</span>
+                  <span className="student-meta-value">{student.phone}</span>
+                </div>
+              )}
+              {sessionLog && (
+                <>
+                  <div className="student-meta-item">
+                    <span className="student-meta-label">Online (ca)</span>
+                    <span className="student-meta-value" style={{ color: 'var(--success)', fontFamily: 'monospace' }}>
+                      {formatDuration(sessionLog.onlineSeconds)}
+                    </span>
+                  </div>
+                  <div className="student-meta-item">
+                    <span className="student-meta-label">Offline (ca)</span>
+                    <span className="student-meta-value" style={{ color: 'var(--danger)', fontFamily: 'monospace' }}>
+                      {formatDuration(sessionLog.offlineSeconds)}
+                    </span>
+                  </div>
+                  {sessionLog.wifiSsids && sessionLog.wifiSsids !== '—' && (
+                    <div className="student-meta-item">
+                      <span className="student-meta-label">WiFi</span>
+                      <span className="student-meta-value" style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>
+                        {sessionLog.wifiSsids}
+                      </span>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+
+            <button
+              type="button"
+              className="btn btn-primary"
+              style={{ width: '100%', justifyContent: 'center' }}
+              onClick={() => setShowProctor(v => !v)}
+            >
+              {showProctor ? 'Ẩn giám sát' : 'Xem webcam & màn hình'}
+            </button>
+            {!isOnline && !showProctor && (
+              <p className="schedule-hint" style={{ margin: 0 }}>
+                Sinh viên offline — stream chỉ có khi app Simple Care đang chạy.
+              </p>
+            )}
+          </div>
+
+          {showProctor && (
+            <div className="student-detail-proctor">
+              <ProctorStreamPanels studentId={student.rkId} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};