tt

client/INSTALL_LINUX.md

@@ -46,13 +46,13 @@ cd client
 chmod +x build.sh
 ./build.sh
 ```
-Sau khi build xong, file thực thi sẽ nằm tại: `client/build/bin/simple_care_v1.2`
+Sau khi build xong, file thực thi sẽ nằm tại: `client/build/bin/simple_care_v1.3`
 
 ---
 
 ## 2. Cho Người dùng cuối (End-user - Chỉ chạy ứng dụng)
 
-Người dùng cuối **không cần** cài đặt Go, Node hay trình biên dịch C. Họ chỉ cần tệp thực thi `simple_care_v1.2` và cài đặt các thư viện đồ họa cơ bản của hệ thống:
+Người dùng cuối **không cần** cài đặt Go, Node hay trình biên dịch C. Họ chỉ cần tệp thực thi `simple_care_v1.3` và cài đặt các thư viện đồ họa cơ bản của hệ thống:
 
 *   **Ubuntu / Debian / Linux Mint:**
     ```bash
@@ -73,8 +73,8 @@ Người dùng cuối **không cần** cài đặt Go, Node hay trình biên d
 ### Lệnh chạy ứng dụng:
 Cấp quyền chạy cho file và khởi chạy:
 ```bash
-chmod +x simple_care_v1.2
+chmod +x simple_care_v1.3
-./simple_care_v1.2
+./simple_care_v1.3
 ```
 
 ---

client/app.go

@@ -8,8 +8,8 @@ import (
 	"crypto/cipher"
 	"crypto/rand"
 	"crypto/sha256"
-	"encoding/json"
 	"encoding/base64"
+	"encoding/json"
 	"errors"
 	"fmt"
 	"html"
@@ -291,43 +291,54 @@ func (a *App) handleGuardViolation(kind, reason string) {
 	a.showQuitDialog("Vi phạm giám sát", reason)
 }
 
-// HandleBeforeClose — SV bấm X / Alt+F4 khi đang giám sát = vi phạm.
+// HandleBeforeClose — SV bấm X / Alt+F4: luôn hỏi xác nhận.
-// Trả về false để cho phép đóng sau khi đã báo cáo.
+// Có → thoát + lưu vết vi phạm (nếu đang giám sát exam/learning). Không → hủy đóng.
 func (a *App) HandleBeforeClose() (prevent bool) {
-	if !a.CheckLoginStatus() || !a.isMonitoringActive() {
-		a.clearRunLock()
-		return false
-	}
 	a.mu.Lock()
 	mode := a.dashboard.MonitorMode
+	loggedIn := a.student != nil
 	a.mu.Unlock()
-	if !shouldRecordViolation(mode) {
+
-		a.clearRunLock()
+	message := "Bạn có chắc muốn thoát Simple Care không?"
-		return false
+	if loggedIn && a.isMonitoringActive() && shouldRecordViolation(mode) {
+		message = "Bạn có chắc chắn muốn thoát ứng dụng không?\n\nLưu ý: Thoát khi đang trong giờ thi/học sẽ được ghi nhận là VI PHẠM."
 	}
 
 	selection, err := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
 		Type:          runtime.QuestionDialog,
 		Title:         "Xác nhận thoát",
-		Message:       "Bạn có chắc chắn muốn thoát ứng dụng không?\n\nLưu ý: Thoát ứng dụng khi đang trong giờ thi/học sẽ được ghi nhận là VI PHẠM.",
+		Message:       message,
 		Buttons:       []string{"Có, thoát ứng dụng", "Không, tiếp tục"},
 		DefaultButton: "Không, tiếp tục",
+		CancelButton:  "Không, tiếp tục",
 	})
 	if err != nil {
-		a.reportViolation("app_closed", "Sinh viên tự đóng ứng dụng khi đang giám sát ("+mode+")")
+		log.Printf("[CLOSE] MessageDialog error: %v — hủy thoát để an toàn", err)
+		return true
+	}
+
+	if !isConfirmQuitSelection(selection) {
+		return true // Không / Cancel → ở lại
+	}
+
+	// Có → gửi vi phạm lên server rồi mới thoát
+	if loggedIn && a.isMonitoringActive() && shouldRecordViolation(mode) {
+		a.reportViolation("app_closed", "Sinh viên xác nhận tắt ứng dụng khi đang giám sát ("+mode+")")
 		a.tearDownBeforeQuit()
+	}
 	a.clearRunLock()
+	log.Printf("[CLOSE] User confirmed quit (mode=%s, loggedIn=%v)", mode, loggedIn)
 	return false
 }
 
-	if selection == "Có, thoát ứng dụng" {
+func isConfirmQuitSelection(selection string) bool {
-		a.reportViolation("app_closed", "Sinh viên tự đóng ứng dụng khi đang giám sát ("+mode+")")
+	s := strings.TrimSpace(strings.ToLower(selection))
-		a.tearDownBeforeQuit()
+	switch s {
-		a.clearRunLock()
+	case "có, thoát ứng dụng", "co, thoat ung dung", "yes", "ok", "có", "co":
-		return false
+		return true
 	}
-
+	// Windows đôi khi trả về đúng nhãn nút đã truyền
-	return true // Prevent close!
+	return strings.Contains(s, "thoát") || strings.Contains(s, "thoat") || s == "yes"
 }
 
 // tearDownBeforeQuit ngắt mọi kênh giám sát ngay — trước khi hiện dialog (tránh treo OK để duy trì kết nối).
@@ -380,6 +391,8 @@ type pendingViolation struct {
 	MonitorMode string `json:"monitorMode"`
 	ClientAt    string `json:"clientAt"`
 	StudentRkID int64  `json:"studentRkId"`
+	ClassRkID   int64  `json:"classRkId"`
+	ExamRoomID  uint   `json:"examRoomId"`
 }
 
 // shouldRecordViolation — chỉ lưu vi phạm khi đang thi hoặc đang học (trong giờ).
@@ -396,6 +409,11 @@ func (a *App) markRunLock() {
 	a.mu.Lock()
 	studentID := int64(0)
 	mode := a.dashboard.MonitorMode
+	classID := a.dashboard.ClassRkID
+	examRoomID := uint(0)
+	if a.dashboard.Exam != nil {
+		examRoomID = a.dashboard.Exam.ExamRoomID
+	}
 	if a.student != nil {
 		studentID = a.student.StudentID
 	}
@@ -406,6 +424,8 @@ func (a *App) markRunLock() {
 	payload, _ := json.Marshal(map[string]any{
 		"studentRkId": studentID,
 		"monitorMode": mode,
+		"classRkId":   classID,
+		"examRoomId":  examRoomID,
 		"startedAt":   time.Now().Format(time.RFC3339),
 	})
 	_ = os.WriteFile(a.runLockPath, payload, 0644)
@@ -425,6 +445,8 @@ func (a *App) detectUncleanShutdown() {
 	var meta struct {
 		StudentRkID int64  `json:"studentRkId"`
 		MonitorMode string `json:"monitorMode"`
+		ClassRkID   int64  `json:"classRkId"`
+		ExamRoomID  uint   `json:"examRoomId"`
 		StartedAt   string `json:"startedAt"`
 	}
 	_ = json.Unmarshal(data, &meta)
@@ -448,6 +470,8 @@ func (a *App) detectUncleanShutdown() {
 		MonitorMode: meta.MonitorMode,
 		ClientAt:    time.Now().Format(time.RFC3339),
 		StudentRkID: meta.StudentRkID,
+		ClassRkID:   meta.ClassRkID,
+		ExamRoomID:  meta.ExamRoomID,
 	})
 }
 
@@ -499,9 +523,11 @@ func (a *App) postViolation(v pendingViolation) bool {
 		"reason":      v.Reason,
 		"monitorMode": v.MonitorMode,
 		"clientAt":    v.ClientAt,
+		"classRkId":   v.ClassRkID,
+		"examRoomId":  v.ExamRoomID,
 	}
 	bodyBytes, _ := json.Marshal(payload)
-	client := http.Client{Timeout: 5 * time.Second}
+	client := http.Client{Timeout: 8 * time.Second}
 	resp, err := client.Post(API_BASE+"/api/student/report-violation", "application/json", bytes.NewBuffer(bodyBytes))
 	if err != nil {
 		log.Printf("[VIOLATION] report failed: %v", err)
@@ -513,7 +539,7 @@ func (a *App) postViolation(v pendingViolation) bool {
 		log.Printf("[VIOLATION] report status %d: %s", resp.StatusCode, string(body))
 		return false
 	}
-	log.Printf("[VIOLATION] reported kind=%s student=%d", v.Kind, v.StudentRkID)
+	log.Printf("[VIOLATION] reported kind=%s student=%d class=%d exam=%d", v.Kind, v.StudentRkID, v.ClassRkID, v.ExamRoomID)
 	return true
 }
 
@@ -521,6 +547,11 @@ func (a *App) reportViolation(kind, reason string) {
 	a.mu.Lock()
 	studentID := int64(0)
 	mode := a.dashboard.MonitorMode
+	classID := a.dashboard.ClassRkID
+	examRoomID := uint(0)
+	if a.dashboard.Exam != nil {
+		examRoomID = a.dashboard.Exam.ExamRoomID
+	}
 	if a.student != nil {
 		studentID = a.student.StudentID
 	}
@@ -534,6 +565,8 @@ func (a *App) reportViolation(kind, reason string) {
 		MonitorMode: mode,
 		ClientAt:    time.Now().Format(time.RFC3339),
 		StudentRkID: studentID,
+		ClassRkID:   classID,
+		ExamRoomID:  examRoomID,
 	}
 	if !a.postViolation(v) {
 		a.enqueuePendingViolation(v)

client/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "frontend",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "dependencies": {
         "pdfjs-dist": "^3.11.174"
       },

client/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

client/frontend/package.json.md5

@@ -1 +1 @@
-06a16f2c007333cdf273a92d4914c63b
+792441f7861d7badf1335f3778fcdebd

client/frontend/src/main.js

@@ -19,7 +19,7 @@ if (typeof window.go.main.App === 'undefined') {
 }
 
 const brandLogoHtml = `<img src="${logoUrl}" alt="Simple Care" class="brand-logo-img" />`;
-const APP_VERSION = '1.2';
+const APP_VERSION = '1.3';
 
 // Trạng thái cục bộ
 let loggedIn = false;

client/internal/blocker/blocker_darwin.go

@@ -173,6 +173,7 @@ var systemAllowed = map[string]bool{
 	"simple_care_v1.0":                true,
 	"simple_care_v1.1":                true,
 	"simple_care_v1.2":                true,
+	"simple_care_v1.3":                true,
 	"simple_care":                     true,
 	"wails":                           true,
 	"code":                            true, // VSCode

client/internal/blocker/blocker_linux.go

@@ -238,6 +238,7 @@ var systemAllowed = map[string]bool{
 	"simple_care_v1.0":  true,
 	"simple_care_v1.1":  true,
 	"simple_care_v1.2":  true,
+	"simple_care_v1.3":  true,
 	"simple_care":       true,
 }
 

client/internal/blocker/blocker_windows.go

@@ -331,6 +331,7 @@ var systemAllowed = map[string]bool{
 	"simple_care_v1.0.exe":            true,
 	"simple_care_v1.1.exe":            true,
 	"simple_care_v1.2.exe":            true,
+	"simple_care_v1.3.exe":            true,
 	"simple_care.exe":                 true,
 	"wails.exe":                       true,
 	"msedgewebview2.exe":              true, // WebView2 runtime (Wails renderer)

client/main.go

@@ -62,7 +62,7 @@ func main() {
 
 	// Create application with options
 	err := wails.Run(&options.App{
-		Title:  "Simple Care v1.2 — Rikkei Education",
+		Title:  "Simple Care v1.3 — Rikkei Education",
 		Width:  1024,
 		Height: 768,
 		Menu:   appMenu,

client/wails.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://wails.io/schemas/config.v2.json",
   "name": "Simple Care by Rikkei Edu",
-  "outputfilename": "simple_care_v1.2",
+  "outputfilename": "simple_care_v1.3",
   "frontend:install": "npm install",
   "frontend:build": "npm run build",
   "frontend:dev:watcher": "npm run dev",

management/package-lock.json

@@ -57,6 +57,7 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -266,29 +267,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
-      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.2",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
-      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
@@ -540,9 +518,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -560,9 +535,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -580,9 +552,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -600,9 +569,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -620,9 +586,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -640,9 +603,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -660,9 +620,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -680,9 +637,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -853,9 +807,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -873,9 +824,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -893,9 +841,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -913,9 +858,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -933,9 +875,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -953,9 +892,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1041,6 +977,7 @@
       "integrity": "sha512-+zEk16yGlz1F9STiRr6uG9hmIXb6nprjLczV/htGptYuLoCuxb+itZ03RKCEeOhBpDDd1NU7qF6x1VLMUp62bw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "picomatch": "^4.0.4"
       },
@@ -1135,6 +1072,7 @@
       "integrity": "sha512-fRa09kZTgu8o71KFcDjUFuc7F+dEbZYZmkI0mg5YBTRs0yMKjYHsq/c0urDKeDb+D5qVgXOdFcuu+DZPKOITwA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -1145,6 +1083,7 @@
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1243,6 +1182,7 @@
       "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.26.0"
       }
@@ -1298,6 +1238,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.38",
         "caniuse-lite": "^1.0.30001799",
@@ -1822,9 +1763,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1846,9 +1784,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1870,9 +1805,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -1894,9 +1826,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -2311,6 +2240,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
       "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2365,6 +2295,7 @@
       "integrity": "sha512-1F1eEtUBtFvcGm1HQ9TiUIUHPQG7mSAODrhIzjxoUEFuo8OcbrGLiVLkevNgj84TE4lnHvnumwFjhJO5Eu135g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "=0.137.0",
         "@rolldown/pluginutils": "^1.0.0"
@@ -2648,6 +2579,7 @@
       "integrity": "sha512-BuJcQK/56NQTWDGn4ABea3q4SSBdNPWwNZKTkkUpcMPnLoquSYH8llRtSUIgoL1KSCpHt5eghLShn50mH36y7Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",

management/src/App.tsx

@@ -28,67 +28,87 @@ import {
 import { useAuth } from './auth/AuthContext';
 
 const IconDashboard = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-    <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" />
+    <rect x="3" y="3" width="7" height="7" rx="1.5" />
-    <rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
+    <rect x="14" y="3" width="7" height="7" rx="1.5" />
+    <rect x="3" y="14" width="7" height="7" rx="1.5" />
+    <rect x="14" y="14" width="7" height="7" rx="1.5" />
   </svg>
 );
 
 const IconClass = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
     <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
     <polyline points="9 22 9 12 15 12 15 22" />
   </svg>
 );
 
 const IconStudent = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-    <circle cx="9" cy="7" r="4" />
+    <circle cx="9" cy="7" r="3.5" />
-    <path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    <path d="M22 21v-2a3.5 3.5 0 0 0-2.5-3.35" />
+    <path d="M16 3.5a3.5 3.5 0 0 1 0 7" />
   </svg>
 );
 
 const IconLearning = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
     <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
     <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
   </svg>
 );
 
 const IconExam = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
     <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
     <polyline points="14 2 14 8 20 8" />
-    <line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
   </svg>
 );
 
 const IconSystem = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
     <circle cx="12" cy="12" r="3" />
-    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
   </svg>
 );
 
 const IconStudentAffairs = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
     <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
   </svg>
 );
 
 const IconApplications = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-    <rect x="3" y="3" width="7" height="7" rx="1" />
+    <rect x="2" y="3" width="20" height="14" rx="2" />
-    <rect x="14" y="3" width="7" height="7" rx="1" />
+    <path d="M8 21h8M12 17v4" />
-    <rect x="14" y="14" width="7" height="7" rx="1" />
+    <path d="M7 8h.01M12 8h.01M17 8h.01M7 12h10" />
-    <path d="M3 14h7v7H3z" />
+  </svg>
+);
+
+const IconMyClass = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M12 3 2 9l10 6 10-6-10-6Z" />
+    <path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5" />
+  </svg>
+);
+
+const IconLogout = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    <polyline points="16 17 21 12 16 7" />
+    <line x1="21" y1="12" x2="9" y2="12" />
   </svg>
 );
 
 const IconMenu = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-    <line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" />
+    <line x1="3" y1="12" x2="21" y2="12" />
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <line x1="3" y1="18" x2="21" y2="18" />
   </svg>
 );
 
@@ -210,122 +230,134 @@ function App() {
           </div>
         </div>
 
-        <nav>
+        <nav className="sidebar-nav" aria-label="Menu chính">
           <ul className="nav-links">
-            <div className="nav-header">Tổng quan</div>
+            <li className="nav-section" aria-hidden="true">
+              <span className="nav-header">Tổng quan</span>
+            </li>
             <li className="nav-item">
               <button
+                type="button"
                 className={navBtn(route.tab === 'dashboard' && !inWorkspace)}
                 onClick={() => setActiveTab('dashboard')}
               >
                 <span className="nav-icon"><IconDashboard /></span>
-                Tổng quan & Tài Liệu
+                <span className="nav-label">Tổng quan & Tài liệu</span>
               </button>
             </li>
 
-            <div className="nav-header">CSDL liên kết</div>
+            <li className="nav-section" aria-hidden="true">
+              <span className="nav-header">CSDL liên kết</span>
+            </li>
             <li className="nav-item">
-              <button className={navBtn(classesActive)} onClick={() => setActiveTab('classes')}>
+              <button type="button" className={navBtn(classesActive)} onClick={() => setActiveTab('classes')}>
                 <span className="nav-icon"><IconClass /></span>
-                Lớp học
+                <span className="nav-label">Lớp học</span>
               </button>
             </li>
             <li className="nav-item">
               <button
+                type="button"
                 className={navBtn(route.tab === 'students' && !inWorkspace)}
                 onClick={() => setActiveTab('students')}
               >
                 <span className="nav-icon"><IconStudent /></span>
-                Sinh viên
+                <span className="nav-label">Sinh viên</span>
               </button>
             </li>
 
-            <div className="nav-header">Quản lý học tập</div>
+            <li className="nav-section" aria-hidden="true">
+              <span className="nav-header">Quản lý học tập</span>
+            </li>
             <li className="nav-item">
-              <button className={navBtn(learningActive)} onClick={() => setActiveTab('learning')}>
+              <button type="button" className={navBtn(learningActive)} onClick={() => setActiveTab('learning')}>
                 <span className="nav-icon"><IconLearning /></span>
-                Phòng Học
+                <span className="nav-label">Phòng học</span>
               </button>
             </li>
             <li className="nav-item">
-              <button className={navBtn(examsActive)} onClick={() => setActiveTab('exams')}>
+              <button type="button" className={navBtn(examsActive)} onClick={() => setActiveTab('exams')}>
                 <span className="nav-icon"><IconExam /></span>
-                Phòng thi
+                <span className="nav-label">Phòng thi</span>
               </button>
             </li>
 
             {myClasses.length > 0 && (
               <>
-                <div className="nav-header">Lớp của tôi</div>
+                <li className="nav-section" aria-hidden="true">
+                  <span className="nav-header">Lớp của tôi</span>
+                </li>
                 {myClasses.map((c) => (
                   <li key={c.id} className="nav-item">
                     <button
-                      className={navBtn(route.classId === c.id && route.tab === 'learning')}
+                      type="button"
+                      className={`${navBtn(route.classId === c.id && route.tab === 'learning')} nav-btn--class`}
                       onClick={() => {
                         navigate('learning', c.id, c.name, 'class');
                         setSidebarOpen(false);
                       }}
                       title={c.name}
-                      style={{
-                        paddingLeft: '1.75rem',
-                        fontSize: '0.82rem',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        display: 'block',
-                        width: '100%',
-                        textAlign: 'left'
-                      }}
                     >
-                      🏫 {c.code || c.name}
+                      <span className="nav-icon"><IconMyClass /></span>
+                      <span className="nav-label">{c.code || c.name}</span>
                     </button>
                   </li>
                 ))}
               </>
             )}
 
-            <div className="nav-header">Công tác sinh viên</div>
+            <li className="nav-section" aria-hidden="true">
+              <span className="nav-header">Công tác sinh viên</span>
+            </li>
             <li className="nav-item">
               <button
+                type="button"
                 className={navBtn(route.tab === 'student-affairs' && !inWorkspace)}
                 onClick={() => setActiveTab('student-affairs')}
               >
                 <span className="nav-icon"><IconStudentAffairs /></span>
-                Công Tác Sinh Viên
+                <span className="nav-label">Công tác sinh viên</span>
               </button>
             </li>
             <li className="nav-item">
               <button
+                type="button"
                 className={navBtn(route.tab === 'applications' && !inWorkspace)}
                 onClick={() => setActiveTab('applications')}
               >
                 <span className="nav-icon"><IconApplications /></span>
-                Ứng Dụng
+                <span className="nav-label">Ứng dụng</span>
               </button>
             </li>
 
-            <div className="nav-header">Hệ thống</div>
+            <li className="nav-section" aria-hidden="true">
+              <span className="nav-header">Hệ thống</span>
+            </li>
             <li className="nav-item">
               <button
+                type="button"
                 className={navBtn(systemActive)}
                 onClick={() => goSystem('organization')}
               >
                 <span className="nav-icon"><IconSystem /></span>
-                Quản lý hệ thống
+                <span className="nav-label">Quản lý hệ thống</span>
               </button>
             </li>
+            <li className="nav-item nav-item--sub">
               <ul className="nav-sub">
                 {SYSTEM_NAV.map(({ section }) => (
-                <li key={section} className="nav-item">
+                  <li key={section}>
                     <button
+                      type="button"
                       className={navBtn(systemActive && route.systemSection === section)}
                       onClick={() => goSystem(section)}
                     >
-                    {SYSTEM_SECTION_LABELS[section]}
+                      <span className="nav-label">{SYSTEM_SECTION_LABELS[section]}</span>
                     </button>
                   </li>
                 ))}
               </ul>
+            </li>
           </ul>
         </nav>
 
@@ -336,12 +368,24 @@ function App() {
             onClick={() => setActiveTab('profile')}
             title="Tài khoản của tôi"
           >
+            <span className="sidebar-user-avatar" aria-hidden>
+              {(staff?.fullName?.trim() || staff?.email || '?')
+                .split(/\s+/)
+                .filter(Boolean)
+                .slice(-2)
+                .map((w) => w[0]?.toUpperCase() || '')
+                .join('')
+                .slice(0, 2) || '?'}
+            </span>
+            <span className="sidebar-user-meta">
               <span className="sidebar-user-name">
                 {staff?.fullName?.trim() || staff?.email?.split('@')[0] || 'Tài khoản'}
               </span>
               <span className="sidebar-user-email">{staff?.email}</span>
+            </span>
           </button>
-          <button type="button" className="link-btn" onClick={logout}>
+          <button type="button" className="sidebar-logout" onClick={logout}>
+            <IconLogout />
             Đăng xuất
           </button>
         </div>
@@ -352,7 +396,7 @@ function App() {
           onClick={toggleSidebarCollapse}
           title={sidebarCollapsed ? 'Mở rộng menu' : 'Thu gọn menu'}
         >
-          <svg viewBox="0 0 10 18" width="10" height="18" fill="currentColor">
+          <svg viewBox="0 0 10 18" width="10" height="18" fill="currentColor" aria-hidden>
             {sidebarCollapsed
               ? <path d="M1 1 L9 9 L1 17" />
               : <path d="M9 1 L1 9 L9 17" />

management/src/api.ts

@@ -387,6 +387,7 @@ export interface StudentViolationItem {
   studentCode: string;
   fullName: string;
   classRkId: number;
+  examRoomId?: number;
   kind: string;
   reason: string;
   monitorMode: string;
@@ -396,7 +397,7 @@ export interface StudentViolationItem {
 
 export const VIOLATION_KIND_OPTIONS = [
   { value: '', label: 'Tất cả loại' },
-  { value: 'app_closed', label: 'Tự đóng app' },
+  { value: 'app_closed', label: 'Tắt ứng dụng' },
   { value: 'unclean_shutdown', label: 'Tắt đột ngột' },
   { value: 'multi_monitor', label: 'Nhiều màn hình' },
   { value: 'user_switch', label: 'Đổi user' },
@@ -932,6 +933,7 @@ export interface ExamRoomItem {
   studentCount: number;
   paperCount: number;
   displayStatus: 'draft' | 'ready' | 'active' | 'ended' | 'cancelled';
+  createdByStaffId?: number;
 }
 
 export interface ExamPaperResource {
@@ -984,8 +986,9 @@ function decodeBase64ToArrayBuffer(b64: string): ArrayBuffer {
 }
 
 export const apiExam = {
-  list: async (): Promise<{ data: ExamRoomItem[] }> => {
+  list: async (opts?: { mine?: boolean }): Promise<{ data: ExamRoomItem[] }> => {
-    const res = await staffFetch('/exam-rooms');
+    const q = opts?.mine ? '?mine=1' : '';
+    const res = await staffFetch(`/exam-rooms${q}`);
     if (!res.ok) await parseError(res, 'Failed');
     return res.json();
   },
@@ -1007,6 +1010,7 @@ export const apiExam = {
       canPublish: boolean;
       canUnpublish: boolean;
       canCancel: boolean;
+      canExtend?: boolean;
     }>;
   },
   publish: async (id: number) => {
@@ -1030,6 +1034,14 @@ export const apiExam = {
     if (!res.ok) await parseError(res, 'Hủy phòng thi thất bại');
     return res.json();
   },
+  extend: async (id: number, minutes: number) => {
+    const res = await staffFetch(`/exam-rooms/${id}/extend`, {
+      method: 'POST',
+      body: JSON.stringify({ minutes }),
+    });
+    if (!res.ok) await parseError(res, 'Gia hạn thất bại');
+    return res.json() as Promise<{ ok: boolean; endTime: string; addedMinutes: number; displayStatus: string }>;
+  },
   update: async (id: number, payload: Partial<{ name: string; startTime: string; endTime: string; allowedApps: string; quizUrl: string }>) => {
     const res = await staffFetch(`/exam-rooms/${id}`, { method: 'PATCH', body: JSON.stringify(payload) });
     if (!res.ok) await parseError(res, 'Cập nhật thất bại');

management/src/components/AppPoolModal.tsx

@@ -9,6 +9,48 @@ interface AppPoolModalProps {
   allowedApps: string;
 }
 
+type IconProps = { size?: number };
+
+const IconBox = ({ size = 20 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+    <path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12" />
+  </svg>
+);
+
+const IconSearch = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="11" cy="11" r="7" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const IconRefresh = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 12a9 9 0 1 1-2.6-6.3" />
+    <polyline points="21 3 21 9 15 9" />
+  </svg>
+);
+
+const IconPlus = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+const IconCheck = ({ size = 12 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+const IconInbox = ({ size = 32 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
 const formatWhen = (iso: string) => {
   if (!iso) return '—';
   const d = new Date(iso);
@@ -80,18 +122,29 @@ export const AppPoolModal: React.FC<AppPoolModalProps> = ({
 
   return (
     <div className="modal-overlay app-pool-overlay" onClick={onClose}>
-      <div className="modal-container app-pool-modal" onClick={e => e.stopPropagation()}>
+      <div className="modal-container app-pool-modal app-picker-modal" onClick={e => e.stopPropagation()}>
-        <div className="modal-header">
+        <div className="modal-header app-picker-header">
-          <div>
+          <div className="app-picker-header-text">
-            <h2 className="modal-title" style={{ margin: 0 }}>Kho ứng dụng</h2>
+            <h2 className="modal-title app-picker-title">
+              <span className="app-picker-title-icon" aria-hidden>
+                <IconBox />
+              </span>
+              Kho ứng dụng
+            </h2>
             <p className="app-pool-modal-sub">
-              Toàn hệ thống — app bị chặn từ mọi lớp. Chọn để thêm vào whitelist lớp hiện tại.
+              Toàn hệ thống — app bị chặn từ mọi lớp. Chọn để thêm vào whitelist hiện tại.
             </p>
           </div>
-          <button type="button" className="btn btn-secondary" onClick={onClose}>Đóng</button>
+          <button type="button" className="btn btn-secondary app-picker-close" onClick={onClose}>
+            Đóng
+          </button>
         </div>
 
         <div className="app-pool-toolbar">
+          <div className="app-picker-search-wrap">
+            <span className="app-picker-search-icon" aria-hidden>
+              <IconSearch />
+            </span>
             <input
               type="search"
               className="app-pool-search"
@@ -100,24 +153,32 @@ export const AppPoolModal: React.FC<AppPoolModalProps> = ({
               onChange={e => setSearch(e.target.value)}
               autoFocus
             />
+          </div>
           <button
             type="button"
-            className="btn btn-secondary"
+            className="btn btn-secondary app-picker-refresh"
             onClick={() => loadPool(debouncedQ)}
             disabled={loading}
           >
+            <IconRefresh />
             {loading ? 'Đang tải...' : 'Làm mới'}
           </button>
         </div>
 
         <div className="app-pool-body">
           {error ? (
-            <div className="discovered-apps-empty discovered-apps-error">{error}</div>
+            <div className="app-picker-state app-picker-state--error">{error}</div>
           ) : loading && items.length === 0 ? (
-            <div className="app-pool-status">Đang tải...</div>
+            <div className="app-picker-state">
+              <div className="sync-spinner" style={{ width: 28, height: 28 }} />
+              <p>Đang tải kho ứng dụng...</p>
+            </div>
           ) : items.length === 0 ? (
-            <div className="app-pool-status">
+            <div className="app-picker-state">
-              {debouncedQ ? `Không tìm thấy "${debouncedQ}"` : 'Chưa có app nào trong kho.'}
+              <IconInbox />
+              <p>
+                {debouncedQ ? `Không tìm thấy “${debouncedQ}”` : 'Chưa có app nào trong kho.'}
+              </p>
             </div>
           ) : (
             <table className="data-table app-pool-table">
@@ -128,7 +189,7 @@ export const AppPoolModal: React.FC<AppPoolModalProps> = ({
                   <th>Tiêu đề</th>
                   <th>Lần chặn</th>
                   <th>Gần nhất</th>
-                  <th></th>
+                  <th style={{ textAlign: 'right' }}>Thao tác</th>
                 </tr>
               </thead>
               <tbody>
@@ -136,17 +197,33 @@ export const AppPoolModal: React.FC<AppPoolModalProps> = ({
                   const added = allowedSet.has(app.keyword.toLowerCase());
                   return (
                     <tr key={app.id} className={added ? 'app-pool-row--added' : ''}>
-                      <td><code className="app-pool-kw">{app.keyword}</code></td>
-                      <td className="app-pool-muted">{app.processName}</td>
-                      <td className="app-pool-muted app-pool-title" title={app.windowTitle}>{app.windowTitle || '—'}</td>
-                      <td className="app-pool-hit">{app.hitCount}×</td>
-                      <td className="app-pool-muted">{formatWhen(app.lastSeenAt)}</td>
                       <td>
+                        <code className="app-pool-kw">{app.keyword}</code>
+                      </td>
+                      <td className="app-pool-muted" title={app.processName}>
+                        {app.processName || '—'}
+                      </td>
+                      <td className="app-pool-muted app-pool-title" title={app.windowTitle}>
+                        {app.windowTitle || '—'}
+                      </td>
+                      <td>
+                        <span className="app-pool-hit">{app.hitCount}×</span>
+                      </td>
+                      <td className="app-pool-muted app-pool-when">{formatWhen(app.lastSeenAt)}</td>
+                      <td style={{ textAlign: 'right' }}>
                         {added ? (
-                          <span className="app-pool-added-tag">Đã có</span>
+                          <span className="app-pool-added-tag">
+                            <IconCheck />
+                            Đã có
+                          </span>
                         ) : (
-                          <button type="button" className="btn btn-primary app-pool-add-btn" onClick={() => handleSelect(app.keyword)}>
+                          <button
-                            + Thêm
+                            type="button"
+                            className="btn btn-primary app-pool-add-btn"
+                            onClick={() => handleSelect(app.keyword)}
+                          >
+                            <IconPlus />
+                            Thêm
                           </button>
                         )}
                       </td>
@@ -159,7 +236,9 @@ export const AppPoolModal: React.FC<AppPoolModalProps> = ({
         </div>
 
         <div className="app-pool-footer">
-          Hiển thị {items.length} kết quả{debouncedQ ? ` cho "${debouncedQ}"` : ''} (tối đa 80 mỗi lần tải)
+          Hiển thị <strong>{items.length}</strong> kết quả
+          {debouncedQ ? ` cho “${debouncedQ}”` : ''}
+          {' '}(tối đa 80 mỗi lần tải)
         </div>
       </div>
     </div>

management/src/components/AppTemplatePickerModal.tsx

@@ -9,6 +9,47 @@ interface AppTemplatePickerModalProps {
   allowedApps: string;
 }
 
+type IconProps = { size?: number };
+
+const IconLayers = ({ size = 20 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m12 2 9 4.5-9 4.5L3 6.5 12 2z" />
+    <path d="m3 12 9 4.5 9-4.5" />
+    <path d="m3 17.5 9 4.5 9-4.5" />
+  </svg>
+);
+
+const IconSearch = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="11" cy="11" r="7" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const IconRefresh = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 12a9 9 0 1 1-2.6-6.3" />
+    <polyline points="21 3 21 9 15 9" />
+  </svg>
+);
+
+const IconCheck = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+const IconInbox = ({ size = 32 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
+function keywordList(csv: string): string[] {
+  return csv.split(',').map((s) => s.trim()).filter(Boolean);
+}
+
 export const AppTemplatePickerModal: React.FC<AppTemplatePickerModalProps> = ({
   open,
   onClose,
@@ -60,20 +101,29 @@ export const AppTemplatePickerModal: React.FC<AppTemplatePickerModalProps> = ({
 
   return (
     <div className="modal-overlay app-pool-overlay" onClick={onClose}>
-      <div className="modal-container app-pool-modal" onClick={(e) => e.stopPropagation()}>
+      <div className="modal-container app-pool-modal app-picker-modal" onClick={(e) => e.stopPropagation()}>
-        <div className="modal-header">
+        <div className="modal-header app-picker-header">
-          <div>
+          <div className="app-picker-header-text">
-            <h2 className="modal-title" style={{ margin: 0 }}>Chọn khung ứng dụng</h2>
+            <h2 className="modal-title app-picker-title">
+              <span className="app-picker-title-icon" aria-hidden>
+                <IconLayers />
+              </span>
+              Chọn khung ứng dụng
+            </h2>
             <p className="app-pool-modal-sub">
-              Ghép bộ keyword đã lưu vào danh sách ứng dụng được phép. Quản lý khung tại Hệ thống → Khung ứng dụng.
+              Ghép bộ keyword đã lưu vào whitelist. Quản lý khung tại Hệ thống → Khung ứng dụng.
             </p>
           </div>
-          <button type="button" className="btn btn-secondary" onClick={onClose}>
+          <button type="button" className="btn btn-secondary app-picker-close" onClick={onClose}>
             Đóng
           </button>
         </div>
 
         <div className="app-pool-toolbar">
+          <div className="app-picker-search-wrap">
+            <span className="app-picker-search-icon" aria-hidden>
+              <IconSearch />
+            </span>
             <input
               type="search"
               className="app-pool-search"
@@ -82,30 +132,58 @@ export const AppTemplatePickerModal: React.FC<AppTemplatePickerModalProps> = ({
               onChange={(e) => setSearch(e.target.value)}
               autoFocus
             />
-          <button type="button" className="btn btn-secondary" onClick={load} disabled={loading}>
+          </div>
+          <button
+            type="button"
+            className="btn btn-secondary app-picker-refresh"
+            onClick={load}
+            disabled={loading}
+          >
+            <IconRefresh />
             {loading ? 'Đang tải...' : 'Làm mới'}
           </button>
         </div>
 
         <div className="app-pool-body">
           {error ? (
-            <div className="discovered-apps-empty discovered-apps-error">{error}</div>
+            <div className="app-picker-state app-picker-state--error">{error}</div>
           ) : loading && items.length === 0 ? (
-            <div className="app-pool-status">Đang tải...</div>
+            <div className="app-picker-state">
+              <div className="sync-spinner" style={{ width: 28, height: 28 }} />
+              <p>Đang tải khung ứng dụng...</p>
+            </div>
           ) : filtered.length === 0 ? (
-            <div className="app-pool-status">
+            <div className="app-picker-state">
-              {q ? `Không tìm thấy "${search}"` : 'Chưa có khung nào. Tạo tại Hệ thống → Khung ứng dụng.'}
+              <IconInbox />
+              <p>
+                {q
+                  ? `Không tìm thấy “${search}”`
+                  : 'Chưa có khung nào. Tạo tại Hệ thống → Khung ứng dụng.'}
+              </p>
             </div>
           ) : (
             <div className="template-picker-list">
-              {filtered.map((tpl) => (
+              {filtered.map((tpl) => {
-                <div key={tpl.id} className="template-picker-card">
+                const kws = keywordList(tpl.keywords);
+                const count = countKeywords(tpl.keywords);
+                return (
+                  <article key={tpl.id} className="template-picker-card">
+                    <div className="template-picker-card-main">
                       <div className="template-picker-card-head">
-                    <strong>{tpl.name}</strong>
+                        <strong className="template-picker-name">{tpl.name}</strong>
-                    <span className="template-picker-count">{countKeywords(tpl.keywords)} keyword</span>
+                        <span className="template-picker-count">{count} keyword</span>
+                      </div>
+                      {tpl.description ? (
+                        <p className="template-picker-desc">{tpl.description}</p>
+                      ) : null}
+                      <div className="template-picker-chips" title={tpl.keywords}>
+                        {kws.map((kw) => (
+                          <span key={kw} className="template-picker-chip">
+                            {kw}
+                          </span>
+                        ))}
+                      </div>
                     </div>
-                  {tpl.description && <p className="template-picker-desc">{tpl.description}</p>}
-                  <code className="template-picker-kw">{tpl.keywords}</code>
                     <button
                       type="button"
                       className="btn btn-primary btn-sm template-picker-apply"
@@ -114,16 +192,19 @@ export const AppTemplatePickerModal: React.FC<AppTemplatePickerModalProps> = ({
                         onClose();
                       }}
                     >
-                    Áp dụng khung
+                      <IconCheck size={13} />
+                      Áp dụng
                     </button>
-                </div>
+                  </article>
-              ))}
+                );
+              })}
             </div>
           )}
         </div>
 
         <div className="app-pool-footer">
-          Đang có {countKeywords(allowedApps)} keyword trong whitelist hiện tại
+          Whitelist hiện tại: <strong>{countKeywords(allowedApps)}</strong> keyword
+          {filtered.length > 0 ? ` · ${filtered.length} khung` : ''}
         </div>
       </div>
     </div>

management/src/components/AttendancePanel.tsx

@@ -14,8 +14,101 @@ import {
   type LeaveRequestItem,
 } from '../api';
 
+/* ─── Icon components ─────────────────────────────────────────────────────── */
+
+type IconProps = { size?: number; className?: string };
+
+const IconClipboard = ({ size = 18 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="8" y="2" width="8" height="4" rx="1" />
+    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+  </svg>
+);
+
+const IconRefresh = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 12a9 9 0 1 1-2.6-6.3" />
+    <polyline points="21 3 21 9 15 9" />
+  </svg>
+);
+
+const IconChevronDown = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+const IconChevronUp = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m18 15-6-6-6 6" />
+  </svg>
+);
+
+const IconMail = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+  </svg>
+);
+
+const IconUpload = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="17 8 12 3 7 8" />
+    <line x1="12" y1="3" x2="12" y2="15" />
+  </svg>
+);
+
+const IconClose = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const IconInfo = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="12" cy="12" r="9" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+    <line x1="12" y1="16" x2="12.01" y2="16" />
+  </svg>
+);
+
+const IconCheck = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+const IconXMark = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const IconImage = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <circle cx="8.5" cy="8.5" r="1.5" />
+    <polyline points="21 15 16 10 5 21" />
+  </svg>
+);
+
+const IconSync = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M4 12c0-4.42 3.58-8 8-8 2.21 0 4.21.9 5.66 2.34" />
+    <polyline points="14 8 20 8 20 2" />
+    <path d="M20 12c0 4.42-3.58 8-8 8-2.21 0-4.21-.9-5.66-2.34" />
+    <polyline points="10 16 4 16 4 22" />
+  </svg>
+);
+
+/* ─── Helpers ────────────────────────────────────────────────────────────── */
+
 interface AttendancePanelProps {
   classId: number;
+  onClose?: () => void;
 }
 
 function formatQldtTime(iso?: string): string {
@@ -28,7 +121,9 @@ function formatQldtTime(iso?: string): string {
   });
 }
 
-export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) => {
+/* ─── Component ─────────────────────────────────────────────────────────── */
+
+export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId, onClose }) => {
   const today = new Date().toISOString().slice(0, 10);
   const [date, setDate] = useState(today);
   const [period, setPeriod] = useState(1);
@@ -46,11 +141,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
 
   const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
     const scrollTop = e.currentTarget.scrollTop;
-    if (scrollTop > 20) {
+    setIsCollapsed(scrollTop > 20);
-      setIsCollapsed(true);
-    } else if (scrollTop <= 5) {
-      setIsCollapsed(false);
-    }
   }, []);
 
   const loadShifts = useCallback(async () => {
@@ -60,9 +151,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
       if (res.data?.length && !res.data.find((s: any) => s.period === period)) {
         setPeriod(res.data[0].period || 1);
       }
-    } catch {
+    } catch { setShifts([]); }
-      setShifts([]);
-    }
   }, [classId, date, period]);
 
   const loadAttendance = useCallback(async (isBackground: boolean | any = false) => {
@@ -72,7 +161,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
       const res = await apiFetchAttendance(classId, date, period);
       setRows(res.data || []);
       setShiftInfo(res.shift || null);
-      if (!isBg) setSelectedStudentRkIds([]); // Clear selection when data changes
+      if (!isBg) setSelectedStudentRkIds([]);
     } catch (e: any) {
       alert(e.message || 'Không tải được điểm danh');
     } finally {
@@ -80,26 +169,16 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
     }
   }, [classId, date, period]);
 
-  const currentShift = useMemo(() => {
+  const currentShift = useMemo(() => shifts.find(s => s.period === period), [shifts, period]);
-    return shifts.find(s => s.period === period);
-  }, [shifts, period]);
-
   const courseId = currentShift?.courseId;
 
   const loadLeaveRequests = useCallback(async () => {
-    if (!courseId) {
+    if (!courseId) { setLeaveRequests([]); return; }
-      setLeaveRequests([]);
-      return;
-    }
     try {
       setLoadingLeave(true);
       const res = await apiFetchLeaveRequests(classId, courseId, date);
       setLeaveRequests(res || []);
-    } catch {
+    } catch { setLeaveRequests([]); } finally { setLoadingLeave(false); }
-      setLeaveRequests([]);
-    } finally {
-      setLoadingLeave(false);
-    }
   }, [classId, courseId, date]);
 
   useEffect(() => { loadShifts(); }, [loadShifts]);
@@ -108,12 +187,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
 
   const handleUpdateLeaveStatus = async (leaveId: number, status: string, studentRkId: number) => {
     try {
-      await apiUpdateLeaveStatus(classId, leaveId, {
+      await apiUpdateLeaveStatus(classId, leaveId, { status, studentRkId, date, period });
-        status,
-        studentRkId,
-        date,
-        period,
-      });
       await loadAttendance();
       await loadLeaveRequests();
     } catch (e: any) {
@@ -125,87 +199,61 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
     const q = searchQuery.trim().toLowerCase();
     if (!q) return rows;
     return rows.filter(row => {
-      const haystack = [row.fullName, row.studentCode, row.email, row.statusLabel]
+      const haystack = [row.fullName, row.studentCode, row.email, row.statusLabel].filter(Boolean).join(' ').toLowerCase();
-        .filter(Boolean)
-        .join(' ')
-        .toLowerCase();
       return haystack.includes(q);
     });
   }, [rows, searchQuery]);
 
   const statusCounts = useMemo(() => {
     const counts: Record<number, number> = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
-    for (const row of rows) {
+    for (const row of rows) { if (counts[row.status] !== undefined) counts[row.status]++; }
-      if (counts[row.status] !== undefined) counts[row.status]++;
-    }
     return counts;
   }, [rows]);
 
-  const toggleStudentSelection = useCallback((studentRkId: number) => {
+  const toggleStudentSelection = (studentRkId: number) => {
     setSelectedStudentRkIds(prev =>
       prev.includes(studentRkId) ? prev.filter(id => id !== studentRkId) : [...prev, studentRkId]
     );
-  }, []);
+  };
 
   const handleStatusChange = async (studentRkId: number, status: number) => {
-    // Optimistic state update so the UI reacts instantly
     setRows(prevRows =>
       prevRows.map(row => {
         if (row.studentRkId === studentRkId) {
           const matchedOpt = ATTENDANCE_STATUS_OPTIONS.find(o => o.value === status);
-          return {
+          return { ...row, status, statusLabel: matchedOpt ? matchedOpt.label : row.statusLabel, statusEditedByTeacher: true };
-            ...row,
-            status,
-            statusLabel: matchedOpt ? matchedOpt.label : row.statusLabel,
-            statusEditedByTeacher: true,
-          };
         }
         return row;
       })
     );
-
     try {
       await apiUpdateAttendanceStatus(classId, { date, period, studentRkId, status });
       await loadAttendance(true);
     } catch (e: any) {
       alert(e.message || 'Cập nhật trạng thái thất bại');
-      await loadAttendance(); // Rollback on failure
+      await loadAttendance();
     }
   };
 
   const handleBulkStatusChange = async (status: number) => {
     if (selectedStudentRkIds.length === 0) return;
-    
-    // Optimistic state update for selected students
     setRows(prevRows =>
       prevRows.map(row => {
         if (selectedStudentRkIds.includes(row.studentRkId)) {
           const matchedOpt = ATTENDANCE_STATUS_OPTIONS.find(o => o.value === status);
-          return {
+          return { ...row, status, statusLabel: matchedOpt ? matchedOpt.label : row.statusLabel, statusEditedByTeacher: true };
-            ...row,
-            status,
-            statusLabel: matchedOpt ? matchedOpt.label : row.statusLabel,
-            statusEditedByTeacher: true,
-          };
         }
         return row;
       })
     );
-
     const idsToUpdate = [...selectedStudentRkIds];
     setSelectedStudentRkIds([]);
-
     try {
-      await apiUpdateAttendanceBulkStatus(classId, {
+      await apiUpdateAttendanceBulkStatus(classId, { date, period, studentRkIds: idsToUpdate, status });
-        date,
-        period,
-        studentRkIds: idsToUpdate,
-        status,
-      });
       await loadAttendance(true);
     } catch (e: any) {
       alert(e.message || 'Cập nhật hàng loạt thất bại');
-      await loadAttendance(); // Rollback
+      await loadAttendance();
     }
   };
 
@@ -222,179 +270,257 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
       await loadAttendance();
     } catch (e: any) {
       alert(e.message || 'Đẩy QLĐT thất bại');
-    } finally {
+    } finally { setPushing(false); }
-      setPushing(false);
-    }
   };
 
   const qldtSynced = Boolean(shiftInfo?.pushedToQldtAt);
   const qldtDirty = Boolean(shiftInfo?.qldtDirty);
 
+  const hasPendingLeave = leaveRequests.some(r => r.status === 'Đang chờ');
+
   return (
-    <div className="attendance-panel">
+    <div className="ap-panel">
-      <div className="attendance-toolbar">
+      <style>{`
-        <label className="attendance-field">
+        .ap-panel { display: flex; flex-direction: column; height: 100%; gap: 0.65rem; }
-          <span>Ngày</span>
+
-          <input
+        /* Header */
-            type="date"
+        .ap-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
-            className="search-input"
+        .ap-header-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
-            style={{ padding: '0.5rem 0.75rem' }}
+        .ap-header-title svg { color: var(--accent); flex-shrink: 0; }
-            value={date}
+        .ap-header-actions { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
-            onChange={e => setDate(e.target.value)}
+
-          />
+        /* Buttons */
-        </label>
+        .ap-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: background 0.15s, border-color 0.15s; line-height: 1.4; white-space: nowrap; }
-        <label className="attendance-field">
+        .ap-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-hover); }
-          <span>Ca học</span>
+        .ap-btn:disabled { opacity: 0.55; cursor: not-allowed; }
-          <select className="select-filter" value={period} onChange={e => setPeriod(Number(e.target.value))}>
+        .ap-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
-            {(shifts.length ? shifts : [{ period: 1 }, { period: 2 }, { period: 3 }, { period: 4 }]).map((s: any) => (
+        .ap-btn--primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
-              <option key={s.period} value={s.period}>
+        .ap-btn--close { padding: 0.22rem 0.45rem; }
-                Ca {s.period}{s.startTime ? ` (${s.startTime}–${s.endTime})` : ''}
+        .ap-btn--leave-badge { background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.3rem; border-radius: 10px; line-height: 1.4; }
-              </option>
+        .ap-btn--leave-badge.muted { background: var(--text-secondary); }
-            ))}
+
-          </select>
+        /* Collapsible toolbar area */
-        </label>
+        .ap-collapsible { display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; transition: max-height 0.3s ease; }
-        <label className="attendance-field attendance-field--grow">
+        .ap-collapsible.collapsed { max-height: 0 !important; }
-          <span>Tìm sinh viên</span>
+
-          <input
+        /* Toolbar */
-            type="search"
+        .ap-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
-            className="app-pool-search attendance-search"
+        .ap-field { display: flex; flex-direction: column; gap: 0.18rem; font-size: 0.71rem; font-weight: 600; color: var(--text-muted); }
-            placeholder="Mã SV, tên, email..."
+        .ap-field--grow { flex: 1; }
-            value={searchQuery}
+        .ap-input { padding: 0.3rem 0.5rem; font-size: 0.78rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
-            onChange={e => setSearchQuery(e.target.value)}
+        .ap-input:focus { outline: none; border-color: var(--accent); }
-          />
+
-        </label>
+        /* QLĐT sync banner */
+        .ap-qldt-banner { padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); background: var(--bg-subtle); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.77rem; }
+        .ap-qldt-banner--synced { background: rgba(46,125,50,0.06); border-color: rgba(46,125,50,0.3); color: #2e7d32; }
+        .ap-qldt-banner--stale { background: rgba(180,83,9,0.06); border-color: rgba(180,83,9,0.35); color: #92400e; }
+
+        /* Shift info strip */
+        .ap-shift-info { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.77rem; color: var(--text-secondary); padding: 0.3rem 0.6rem; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
+
+        /* Status chips */
+        .ap-chips { display: flex; flex-wrap: wrap; gap: 0.22rem; align-items: center; }
+        .ap-chip { border: 1px solid transparent; border-radius: 99px; padding: 0.14rem 0.4rem; font-size: 0.68rem; font-weight: 700; cursor: default; background: transparent; display: inline-flex; align-items: center; gap: 0.18rem; }
+        .ap-chip-count { min-width: 1rem; text-align: center; padding: 0.04rem 0.18rem; border-radius: 99px; background: rgba(0,0,0,0.12); }
+        .ap-chips-total { margin-left: auto; font-size: 0.71rem; color: var(--text-muted); font-weight: 600; }
+
+        /* Notice banner */
+        .ap-notice { padding: 0.55rem 0.75rem; border: 1px solid var(--border-color); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg-subtle); font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; display: flex; align-items: flex-start; gap: 0.45rem; }
+        .ap-notice svg { color: var(--accent); flex-shrink: 0; margin-top: 0.05rem; }
+        .ap-notice--amber { border-left-color: #d97706; background: rgba(253,230,138,0.18); color: #78350f; }
+        .ap-notice--amber svg { color: #d97706; }
+
+        /* Bulk actions bar */
+        .ap-bulk { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); flex-wrap: wrap; }
+        .ap-bulk-title { font-weight: 600; font-size: 0.82rem; }
+        .ap-bulk-btns { display: flex; gap: 0.2rem; flex-wrap: wrap; }
+
+        /* Table */
+        .ap-table-scroll { flex: 1; overflow: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
+        .ap-table { width: 100%; border-collapse: collapse; }
+        .ap-table thead th { padding: 0.5rem 0.8rem; background: var(--bg-subtle); font-weight: 700; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
+        .ap-table thead th:first-child { width: 40px; text-align: center; padding: 0.5rem 0.5rem; }
+        .ap-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.1s; }
+        .ap-table tbody tr:last-child { border-bottom: none; }
+        .ap-table tbody td { padding: 0.42rem 0.8rem; font-size: 0.82rem; vertical-align: middle; }
+        .ap-table tbody td:first-child { text-align: center; padding: 0.42rem 0.5rem; }
+
+        /* QLĐT inline tags */
+        .ap-tag { font-size: 0.62rem; font-weight: 700; padding: 0.1rem 0.3rem; border-radius: 3px; }
+        .ap-tag--ok { background: rgba(46,125,50,0.1); color: #2e7d32; border: 1px solid rgba(46,125,50,0.3); }
+        .ap-tag--pending { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-color); }
+        .ap-tag--locked { background: rgba(21,101,192,0.08); color: #1565c0; border: 1px solid rgba(21,101,192,0.25); }
+
+        /* Leave modal notice */
+        .ap-leave-notice { padding: 0.55rem 0.75rem; border: 1px solid #bae6fd; border-left: 3px solid #0ea5e9; border-radius: var(--radius-sm); background: rgba(224,242,254,0.5); font-size: 0.76rem; color: #0369a1; line-height: 1.5; display: flex; align-items: flex-start; gap: 0.45rem; }
+        .ap-leave-notice svg { color: #0ea5e9; flex-shrink: 0; margin-top: 0.05rem; }
+        .ap-leave-card { display: flex; flex-direction: column; gap: 8px; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); }
+        .ap-leave-card-reason { font-size: 0.77rem; color: var(--text-primary); background: var(--bg-subtle); padding: 0.4rem 0.65rem; border-radius: var(--radius-sm); border-left: 3px solid #cbd5e1; line-height: 1.45; }
+        .ap-leave-status { font-size: 0.69rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 4px; }
+        .ap-leave-status--pending { background: #fef3c7; color: #b45309; }
+        .ap-leave-status--approved { background: #d1fae5; color: #065f46; }
+        .ap-leave-status--rejected { background: #fee2e2; color: #991b1b; }
+
+        /* Empty & loading states */
+        .ap-empty { min-height: 200px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.85rem; }
+      `}</style>
+
+      {/* ── Header ── */}
+      <div className="ap-header">
+        <h3 className="ap-header-title">
+          <IconClipboard size={18} />
+          Điểm danh ca học
+        </h3>
+        <div className="ap-header-actions">
           <button
             type="button"
-          className="btn btn-secondary"
+            className="ap-btn"
             onClick={() => setIsCollapsed(!isCollapsed)}
-          title={isCollapsed ? 'Hiện đầy đủ thông tin chi tiết' : 'Ẩn bớt thông tin chi tiết để xem bảng to hơn'}
           >
-          {isCollapsed ? '📂 Chi tiết' : '📁 Thu gọn'}
+            {isCollapsed ? <><IconChevronDown size={14} /> Chi tiết</> : <><IconChevronUp size={14} /> Thu gọn</>}
           </button>
-        <button type="button" className="btn btn-secondary" onClick={() => loadAttendance(false)} disabled={loading}>
+          <button
+            type="button"
+            className="ap-btn"
+            onClick={() => loadAttendance(false)}
+            disabled={loading}
+          >
+            <IconRefresh size={14} />
             Tải lại
           </button>
           {courseId && (
             <button
               type="button"
-            className="btn btn-secondary"
+              className="ap-btn"
               onClick={() => setShowLeaveModal(true)}
-            style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
             >
-            ✉️ Đơn phép
+              <IconMail size={14} />
+              Đơn phép
               {leaveRequests.length > 0 && (
-              <span 
+                <span className={`ap-btn--leave-badge${hasPendingLeave ? '' : ' muted'}`}>
-                className="badge" 
-                style={{ 
-                  background: leaveRequests.some(r => r.status === 'Đang chờ') ? 'var(--accent)' : 'var(--text-secondary)', 
-                  color: '#fff', 
-                  fontSize: '0.72rem', 
-                  padding: '0.1rem 0.35rem', 
-                  borderRadius: '10px',
-                  fontWeight: 700
-                }}
-              >
                   {leaveRequests.length}
                 </span>
               )}
             </button>
           )}
-        <button type="button" className="btn btn-primary" onClick={handlePushQLDT} disabled={pushing || rows.length === 0}>
+          <button
+            type="button"
+            className="ap-btn ap-btn--primary"
+            onClick={handlePushQLDT}
+            disabled={pushing || rows.length === 0}
+          >
+            <IconUpload size={14} />
             {pushing ? 'Đang tải...' : 'Đẩy QLĐT'}
           </button>
-      </div>
+          {onClose && (
-
+            <button type="button" className="ap-btn ap-btn--close" onClick={onClose} title="Đóng">
-      <div className={`attendance-collapsible-wrapper ${isCollapsed ? 'collapsed' : ''}`}>
+              <IconClose size={14} />
-        <div
+            </button>
-          className={`attendance-qldt-banner${
-            qldtSynced ? (qldtDirty ? ' attendance-qldt-banner--stale' : ' attendance-qldt-banner--synced') : ''
-          }`}
-        >
-          {qldtSynced ? (
-            qldtDirty ? (
-              <>
-                <strong>Đã lưu QLĐT — có thay đổi mới</strong>
-                <span>
-                  Lần đẩy: {formatQldtTime(shiftInfo?.pushedToQldtAt)} · Cần đẩy lại sau khi chỉnh sửa
-                </span>
-              </>
-            ) : (
-              <>
-                <strong>Đã lưu QLĐT</strong>
-                <span>Lần đẩy gần nhất: {formatQldtTime(shiftInfo?.pushedToQldtAt)}</span>
-              </>
-            )
-          ) : (
-            <>
-              <strong>Chưa đẩy lên QLĐT</strong>
-              <span>Ca {period} ngày {date} — bấm &quot;Đẩy QLĐT&quot; sau khi kiểm tra trạng thái</span>
-            </>
           )}
         </div>
+      </div>
 
+      {/* ── Collapsible toolbar area ── */}
+      <div className={`ap-collapsible${isCollapsed ? ' collapsed' : ''}`}>
+        {/* Toolbar: date / shift / search */}
+        <div className="ap-toolbar">
+          <label className="ap-field">
+            <span>Ngày</span>
+            <input type="date" className="ap-input search-input" value={date} onChange={e => setDate(e.target.value)} />
+          </label>
+          <label className="ap-field">
+            <span>Ca học</span>
+            <select className="ap-input select-filter" value={period} onChange={e => setPeriod(Number(e.target.value))}>
+              {(shifts.length ? shifts : [{ period: 1 }, { period: 2 }, { period: 3 }, { period: 4 }]).map((s: any) => (
+                <option key={s.period} value={s.period}>Ca {s.period}{s.startTime ? ` (${s.startTime}–${s.endTime})` : ''}</option>
+              ))}
+            </select>
+          </label>
+          <label className="ap-field ap-field--grow">
+            <span>Tìm sinh viên</span>
+            <input type="search" className="ap-input app-pool-search attendance-search" placeholder="Mã SV, tên, email..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
+          </label>
+        </div>
+
+        {/* QLĐT sync status banner */}
+        <div className={`ap-qldt-banner${qldtSynced ? (qldtDirty ? ' ap-qldt-banner--stale' : ' ap-qldt-banner--synced') : ''}`}>
+          {qldtSynced
+            ? qldtDirty
+              ? <><strong>Đã lưu QLĐT — có thay đổi mới</strong><span>Lần đẩy: {formatQldtTime(shiftInfo?.pushedToQldtAt)} · Cần đẩy lại</span></>
+              : <><strong>Đã lưu QLĐT</strong><span>Lần đẩy: {formatQldtTime(shiftInfo?.pushedToQldtAt)}</span></>
+            : <><strong>Chưa đẩy lên QLĐT</strong><span>Ca {period} ngày {date} — bấm "Đẩy QLĐT" sau khi kiểm tra</span></>
+          }
+        </div>
+
+        {/* Shift info strip */}
         {currentShift && (
-          <div className="attendance-shift-info">
+          <div className="ap-shift-info">
             <span>{currentShift.startTime}–{currentShift.endTime}</span>
             <span>{currentShift.courseName || 'Chưa chọn môn'}</span>
-            {!currentShift.isActive && <span className="badge badge-muted">Ca tắt</span>}
+            {!currentShift.isActive && <span className="badge badge-muted" style={{ fontSize: '0.65rem' }}>Ca tắt</span>}
           </div>
         )}
 
-        <div className="attendance-status-summary">
+        {/* Status summary chips */}
+        <div className="ap-chips">
           {ATTENDANCE_STATUS_OPTIONS.map(opt => (
-            <button
+            <button key={opt.value} type="button" className={`ap-chip attendance-summary-chip ${attendanceStatusClass(opt.value)}`} onClick={() => setSearchQuery('')}>
-              key={opt.value}
+              <span>{opt.short}</span>
-              type="button"
+              <span className="ap-chip-count">{statusCounts[opt.value] ?? 0}</span>
-              className={`attendance-summary-chip ${attendanceStatusClass(opt.value)}`}
-              onClick={() => setSearchQuery('')}
-              title={`${opt.label}: ${statusCounts[opt.value] ?? 0} sinh viên`}
-            >
-              <span className="attendance-summary-chip-label">{opt.short}</span>
-              <span className="attendance-summary-chip-count">{statusCounts[opt.value] ?? 0}</span>
             </button>
           ))}
-          <span className="attendance-summary-total">
+          <span className="ap-chips-total">{filteredRows.length}/{rows.length} SV{searchQuery.trim() ? ' (đã lọc)' : ''}</span>
-            {filteredRows.length}/{rows.length} SV
-            {searchQuery.trim() ? ' (đã lọc)' : ''}
-          </span>
         </div>
 
-        <p className="schedule-hint" style={{ margin: '0 0 4px 0' }}>
+        <p className="schedule-hint" style={{ margin: '0 0 2px 0', fontSize: '0.71rem', color: 'var(--text-muted)' }}>
           Sửa trạng thái thủ công sẽ được khóa — hệ thống tự tính sẽ không ghi đè.
         </p>
 
-        <div style={{ padding: '0.65rem 0.85rem', background: '#fef3c7', border: '1px solid #fcd34d', borderRadius: '4px', color: '#92400e', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '0.35rem', margin: '4px 0 4px 0', lineHeight: '1.4' }}>
+        {/* Notice banner — replaces yellow emoji block */}
-          💡 <strong>Lưu ý:</strong> Hệ thống hiện tại chỉ ghi nhận điểm danh học tập nội bộ và <strong>KHÔNG tự động lưu lên QLĐT</strong>. Thầy cô vui lòng kiểm tra kỹ trạng thái của sinh viên, sau đó bấm nút <strong>Đẩy QLĐT</strong> ở góc phải bên trên để đồng bộ điểm danh chính thức.
+        <div className="ap-notice ap-notice--amber">
+          <IconInfo size={15} />
+          <span>
+            <strong>Lưu ý:</strong> Hệ thống hiện tại chỉ ghi nhận điểm danh học tập nội bộ và{' '}
+            <strong>KHÔNG tự động lưu lên QLĐT</strong>. Thầy cô vui lòng kiểm tra kỹ trạng thái của sinh viên,
+            sau đó bấm nút <strong>Đẩy QLĐT</strong> ở góc phải bên trên để đồng bộ điểm danh chính thức.
+          </span>
         </div>
       </div>
 
-      {/* Leave Requests Approval Modal */}
+      {/* ── Leave Requests Modal ── */}
       {showLeaveModal && courseId && (
-        <div className="modal-overlay" onClick={() => setShowLeaveModal(false)}>
+        <div className="modal-overlay" style={{ zIndex: 200 }} onClick={() => setShowLeaveModal(false)}>
           <div className="modal-container" style={{ maxWidth: '680px', width: '95%', display: 'flex', flexDirection: 'column' }} onClick={e => e.stopPropagation()}>
             <div className="modal-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
               <div>
-                <h3 className="modal-title" style={{ margin: 0 }}>✉️ Đơn xin nghỉ phép trong ca</h3>
+                <h3 className="modal-title" style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
-                <p style={{ margin: '4px 0 0 0', color: 'var(--text-secondary)', fontSize: '0.8rem' }}>
+                  <IconMail size={17} />
-                  Ca {period} ngày {date} - Giao diện duyệt đơn xin nghỉ từ cổng QLĐT portal.
+                  Đơn xin nghỉ phép
-                </p>
+                </h3>
+                <p style={{ margin: '4px 0 0 0', color: 'var(--text-secondary)', fontSize: '0.8rem' }}>Ca {period} ngày {date}</p>
               </div>
               <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-                <button 
+                <button type="button" className="ap-btn" onClick={loadLeaveRequests} disabled={loadingLeave}>
-                  type="button" 
+                  <IconRefresh size={14} />
-                  className="btn btn-secondary btn-sm" 
+                  {loadingLeave ? 'Đang tải...' : 'Làm mới'}
-                  onClick={loadLeaveRequests} 
-                  disabled={loadingLeave}
-                  style={{ padding: '0.3rem 0.6rem', fontSize: '0.78rem' }}
-                >
-                  {loadingLeave ? 'Đang tải...' : '🔄 Làm mới'}
-                </button>
-                <button type="button" className="btn btn-secondary btn-sm" onClick={() => setShowLeaveModal(false)}>
-                  Đóng
                 </button>
+                <button type="button" className="ap-btn" onClick={() => setShowLeaveModal(false)}>Đóng</button>
               </div>
             </div>
             <div className="modal-body" style={{ padding: '1rem', overflowY: 'auto', maxHeight: '60vh', display: 'flex', flexDirection: 'column', gap: '10px' }}>
+              {/* Info notice */}
+              <div className="ap-leave-notice">
+                <IconInfo size={15} />
+                <div>
+                  <strong>Lưu ý duyệt đơn phép:</strong> Thao tác duyệt/từ chối đơn tại đây chỉ được ghi nhận{' '}
+                  <strong>nội bộ trên hệ thống Simple Care</strong> (không đồng bộ ngược lên QLĐT).
+                  <div style={{ marginTop: '0.25rem' }}>
+                    • Khi duyệt đơn, hệ thống sẽ tự động đổi trạng thái điểm danh thành <strong>"Nghỉ có phép"</strong>.<br />
+                    • Trạng thái này sẽ được cập nhật lên QLĐT khi bấm nút <strong>"Đẩy QLĐT"</strong>.
+                  </div>
+                </div>
+              </div>
+
               {loadingLeave ? (
                 <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem 0' }}>
                   <div className="sync-spinner" style={{ width: 28, height: 28 }} />
@@ -405,81 +531,43 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
                 </div>
               ) : (
                 leaveRequests.map((req) => (
-                  <div 
+                  <div key={req.id} className="ap-leave-card">
-                    key={req.id} 
-                    style={{ 
-                      display: 'flex', 
-                      flexDirection: 'column', 
-                      gap: '8px', 
-                      padding: '0.85rem', 
-                      border: '1px solid var(--border-color)', 
-                      borderRadius: '8px', 
-                      backgroundColor: '#ffffff',
-                      boxShadow: 'var(--shadow-sm)'
-                    }}
-                  >
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '8px' }}>
                       <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                         <div style={{ fontWeight: 600, fontSize: '0.9rem' }}>{req.student.fullName}</div>
                         <code style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>{req.student.studentCode}</code>
-                        <span 
+                        <span className={`ap-leave-status ${req.status === 'Đang chờ' ? 'ap-leave-status--pending' : req.status === 'Phê duyệt' ? 'ap-leave-status--approved' : 'ap-leave-status--rejected'}`}>
-                          className="badge" 
-                          style={{ 
-                            fontSize: '0.72rem', 
-                            fontWeight: 600,
-                            backgroundColor: req.status === 'Đang chờ' ? '#fef3c7' : req.status === 'Phê duyệt' ? '#d1fae5' : '#fee2e2',
-                            color: req.status === 'Đang chờ' ? '#b45309' : req.status === 'Phê duyệt' ? '#065f46' : '#991b1b',
-                            padding: '0.15rem 0.45rem',
-                            borderRadius: '4px'
-                          }}
-                        >
                           {req.status}
                         </span>
                       </div>
-
                       {req.status === 'Đang chờ' && (
                         <div style={{ display: 'flex', gap: '6px' }}>
                           <button
                             type="button"
-                            className="btn btn-primary btn-sm"
+                            className="ap-btn ap-btn--primary"
-                            style={{ padding: '0.25rem 0.65rem', fontSize: '0.78rem', backgroundColor: 'var(--success)', borderColor: 'var(--success)' }}
+                            style={{ background: 'var(--success)', borderColor: 'var(--success)' }}
-                            onClick={() => {
+                            onClick={() => { if (confirm(`Phê duyệt đơn xin nghỉ phép của ${req.student.fullName}?`)) handleUpdateLeaveStatus(req.id, 'Phê duyệt', req.student.id); }}
-                              if (confirm(`Phê duyệt đơn xin nghỉ phép của ${req.student.fullName}? Trạng thái điểm danh ca sẽ chuyển thành Nghỉ có phép.`)) {
-                                handleUpdateLeaveStatus(req.id, 'Phê duyệt', req.student.id);
-                              }
-                            }}
                           >
-                            ✓ Phê duyệt
+                            <IconCheck size={13} /> Phê duyệt
                           </button>
                           <button
                             type="button"
-                            className="btn btn-secondary btn-sm text-danger"
+                            className="ap-btn"
-                            style={{ padding: '0.25rem 0.65rem', fontSize: '0.78rem', borderColor: '#fca5a5' }}
+                            style={{ borderColor: '#fca5a5' }}
-                            onClick={() => {
+                            onClick={() => { if (confirm(`Từ chối đơn xin nghỉ phép của ${req.student.fullName}?`)) handleUpdateLeaveStatus(req.id, 'Từ chối', req.student.id); }}
-                              if (confirm(`Từ chối đơn xin nghỉ phép của ${req.student.fullName}?`)) {
-                                handleUpdateLeaveStatus(req.id, 'Từ chối', req.student.id);
-                              }
-                            }}
                           >
-                            ✗ Từ chối
+                            <IconXMark size={13} /> Từ chối
                           </button>
                         </div>
                       )}
                     </div>
-
+                    <div className="ap-leave-card-reason">
-                    <div style={{ fontSize: '0.82rem', color: 'var(--text-primary)', background: '#f9fafb', padding: '8px 10px', borderRadius: '4px', borderLeft: '4px solid #cbd5e1', lineHeight: '1.4' }}>
                       <strong>Lý do nghỉ:</strong> {req.note || 'Không có ghi chú'}
                     </div>
-
                     {req.reasonImage && (
-                      <div style={{ marginTop: '4px' }}>
+                      <div>
-                        <a 
+                        <a href={req.reasonImage} target="_blank" rel="noopener noreferrer" style={{ fontSize: '0.72rem', color: 'var(--accent)', textDecoration: 'underline', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
-                          href={req.reasonImage} 
+                          <IconImage size={13} /> Xem ảnh minh chứng
-                          target="_blank" 
-                          rel="noopener noreferrer" 
-                          style={{ fontSize: '0.75rem', color: 'var(--accent)', textDecoration: 'underline', display: 'inline-flex', alignItems: 'center', gap: '4px', fontWeight: 500 }}
-                        >
-                          🖼️ Xem ảnh minh chứng phép
                         </a>
                       </div>
                     )}
@@ -491,43 +579,34 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
         </div>
       )}
 
+      {/* ── Bulk status actions bar ── */}
       {selectedStudentRkIds.length > 0 && (
-        <div className="attendance-bulk-actions">
+        <div className="ap-bulk">
-          <span className="attendance-bulk-title">
+          <span className="ap-bulk-title">Đang chọn {selectedStudentRkIds.length} SV:</span>
-            Đang chọn {selectedStudentRkIds.length} sinh viên:
+          <div className="ap-bulk-btns">
-          </span>
-          <div className="attendance-bulk-btns">
             {ATTENDANCE_STATUS_OPTIONS.map(opt => (
-              <button
+              <button key={opt.value} type="button" className={`ap-btn ${attendanceStatusClass(opt.value)}`} style={{ border: '1px solid var(--att-border)' }} onClick={() => handleBulkStatusChange(opt.value)}>
-                key={opt.value}
+                Gắn "{opt.label}"
-                type="button"
-                className={`btn btn-secondary ${attendanceStatusClass(opt.value)}`}
-                style={{ padding: '0.25rem 0.75rem', fontSize: '0.875rem', border: '1px solid var(--att-border)' }}
-                onClick={() => handleBulkStatusChange(opt.value)}
-              >
-                Gắn &quot;{opt.label}&quot;
               </button>
             ))}
           </div>
-          <button
+          <button type="button" className="ap-btn" style={{ marginLeft: 'auto' }} onClick={() => setSelectedStudentRkIds([])}>
-            type="button"
-            className="btn btn-muted attendance-bulk-btn-close"
-            style={{ padding: '0.25rem 0.75rem', fontSize: '0.875rem' }}
-            onClick={() => setSelectedStudentRkIds([])}
-          >
             Hủy chọn
           </button>
         </div>
       )}
 
-      <div className="attendance-table-scroll table-wrapper" onScroll={handleScroll}>
+      {/* ── Attendance table ── */}
+      <div className="ap-table-scroll attendance-table-scroll table-wrapper" onScroll={handleScroll}>
         {loading ? (
-          <div className="empty-state"><div className="sync-spinner" style={{ width: 28, height: 28 }} /></div>
+          <div className="ap-empty">
+            <div className="sync-spinner" style={{ width: 28, height: 28 }} />
+          </div>
         ) : (
-          <table className="data-table attendance-table">
+          <table className="ap-table data-table attendance-table">
             <thead>
               <tr>
-                <th style={{ width: '45px', textAlign: 'center' }}>
+                <th>
                   <input
                     type="checkbox"
                     checked={filteredRows.length > 0 && filteredRows.every(r => selectedStudentRkIds.includes(r.studentRkId))}
@@ -552,7 +631,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
             <tbody>
               {filteredRows.length === 0 ? (
                 <tr>
-                  <td colSpan={5} style={{ textAlign: 'center', color: 'var(--text-muted)' }}>
+                  <td colSpan={5} style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '1.5rem 0', fontStyle: 'italic', fontSize: '0.83rem' }}>
                     {rows.length === 0 ? 'Chưa có dữ liệu điểm danh' : 'Không tìm thấy sinh viên phù hợp'}
                   </td>
                 </tr>
@@ -560,60 +639,38 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
                 filteredRows.map(row => {
                   const isSelected = selectedStudentRkIds.includes(row.studentRkId);
                   return (
-                    <tr key={row.studentRkId} className={attendanceStatusClass(row.status)}>
+                    <tr key={row.studentRkId} className={attendanceStatusClass(row.status)} style={{ background: isSelected ? 'rgba(var(--accent-rgb, 99 102 241) / 0.05)' : undefined }}>
-                      <td
+                      <td>
-                        style={{ textAlign: 'center', cursor: 'pointer' }}
+                        <input type="checkbox" checked={isSelected} onChange={() => toggleStudentSelection(row.studentRkId)} />
-                        onClick={() => toggleStudentSelection(row.studentRkId)}
-                      >
-                        <input
-                          type="checkbox"
-                          checked={isSelected}
-                          onChange={() => {}}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            toggleStudentSelection(row.studentRkId);
-                          }}
-                        />
                       </td>
-                      <td
+                      <td style={{ cursor: 'pointer' }} onClick={() => toggleStudentSelection(row.studentRkId)}>
-                        style={{ cursor: 'pointer' }}
+                        <div className="attendance-student-name" style={{ fontWeight: 700, fontSize: '0.85rem' }}>{row.fullName}</div>
-                        onClick={() => toggleStudentSelection(row.studentRkId)}
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem 0.5rem', fontSize: '0.7rem', color: 'var(--text-muted)', marginTop: '1px' }}>
-                      >
-                        <div className="attendance-student-name">{row.fullName}</div>
-                        <div className="attendance-student-meta">
                           <code>{row.studentCode}</code>
                           {row.email && <span>{row.email}</span>}
                         </div>
                       </td>
                       <td>
-                        <span className="attendance-online-mins">{row.onlineMinutes}</span>
+                        <span style={{ fontFamily: 'monospace', fontWeight: 800, fontSize: '0.95rem' }}>{row.onlineMinutes}</span>
-                        <span className="attendance-online-unit">phút</span>
+                        <span style={{ fontSize: '0.65rem', color: 'var(--text-muted)', marginLeft: '2px' }}>phút</span>
                       </td>
                       <td>
                         <select
                           className={`attendance-status-select ${attendanceStatusClass(row.status)}`}
+                          style={{ padding: '0.2rem 0.4rem', fontSize: '0.72rem', fontWeight: 600, border: '1px solid var(--att-border)', background: 'var(--att-bg)', color: 'var(--att-fg)', borderRadius: '4px', cursor: 'pointer' }}
                           value={row.status}
                           onChange={e => handleStatusChange(row.studentRkId, Number(e.target.value))}
                         >
-                          {ATTENDANCE_STATUS_OPTIONS.map(opt => (
+                          {ATTENDANCE_STATUS_OPTIONS.map(opt => (<option key={opt.value} value={opt.value}>{opt.label}</option>))}
-                            <option key={opt.value} value={opt.value}>{opt.label}</option>
-                          ))}
                         </select>
                       </td>
                       <td>
-                        <div className="attendance-notes">
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.2rem' }}>
-                          {row.pushedToQldtAt ? (
+                          {row.pushedToQldtAt
-                            <span className="attendance-qldt-tag attendance-qldt-tag--ok" title={row.pushedToQldtAt}>
+                            ? <span className="ap-tag ap-tag--ok">QLĐT <IconSync size={10} /></span>
-                              QLĐT ✓
+                            : <span className="ap-tag ap-tag--pending">Chưa QLĐT</span>
-                            </span>
+                          }
-                          ) : (
+                          {row.statusEditedByTeacher && <span className="ap-tag ap-tag--locked">Đã khóa</span>}
-                            <span className="attendance-qldt-tag attendance-qldt-tag--pending">Chưa QLĐT</span>
-                          )}
-                          {row.statusEditedByTeacher && (
-                            <span className="attendance-lock-tag" title="Giáo viên đã sửa — không bị ghi đè">
-                              Đã khóa
-                            </span>
-                          )}
                         </div>
                       </td>
                     </tr>

management/src/components/ClassesTab.tsx

@@ -3,6 +3,85 @@ import { api } from '../api';
 import type { ClassItem, SyncStatus } from '../api';
 import { openClass } from './NavHistoryBar';
 
+type IconProps = { size?: number; className?: string };
+
+const IconGraduation = ({ size = 22 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
+    <path d="M6 12v5c0 1 2.5 3 6 3s6-2 6-3v-5" />
+  </svg>
+);
+
+const IconRefresh = ({ size = 18 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 12a9 9 0 1 1-2.6-6.3" />
+    <polyline points="21 3 21 9 15 9" />
+  </svg>
+);
+
+const IconCheck = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+const IconAlert = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="12" cy="12" r="9" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+    <line x1="12" y1="16" x2="12.01" y2="16" />
+  </svg>
+);
+
+const IconSearch = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="11" cy="11" r="7" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const IconUsers = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="3.5" />
+    <path d="M22 21v-2a3.5 3.5 0 0 0-2.5-3.35" />
+    <path d="M16 3.5a3.5 3.5 0 0 1 0 7" />
+  </svg>
+);
+
+const IconSpecialize = ({ size = 12 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+  </svg>
+);
+
+const IconOpen = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M5 12h14" />
+    <path d="m13 6 6 6-6 6" />
+  </svg>
+);
+
+const IconInbox = ({ size = 40 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
+const IconChevronLeft = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m15 18-6-6 6-6" />
+  </svg>
+);
+
+const IconChevronRight = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
 export const ClassesTab: React.FC = () => {
   const [classes, setClasses] = useState<ClassItem[]>([]);
   const [total, setTotal] = useState(0);
@@ -12,7 +91,6 @@ export const ClassesTab: React.FC = () => {
   const [systemFilter, setSystemFilter] = useState<number | undefined>(undefined);
   const [studyingOnly, setStudyingOnly] = useState(false);
   const [loading, setLoading] = useState(true);
-  // Sync state
   const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
 
   const fetchClasses = async () => {
@@ -49,12 +127,10 @@ export const ClassesTab: React.FC = () => {
     fetchClasses();
   }, [page, search, systemFilter, studyingOnly]);
 
-  // Check sync status on load and start polling if running
   useEffect(() => {
     fetchSyncStatus();
   }, []);
 
-  // Sync polling logic
   useEffect(() => {
     let timer: any;
     if (syncStatus?.running) {
@@ -62,7 +138,7 @@ export const ClassesTab: React.FC = () => {
         const isRunning = await fetchSyncStatus();
         if (!isRunning) {
           clearInterval(timer);
-          fetchClasses(); // Reload data when sync completes
+          fetchClasses();
         }
       }, 2000);
     }
@@ -74,13 +150,12 @@ export const ClassesTab: React.FC = () => {
   const handleStartSync = async () => {
     try {
       await api.startClassesSync();
-      // Set local state to running to trigger useEffect poller
       setSyncStatus({
         running: true,
         done: false,
         total: 0,
         synced: 0,
-        updatedAt: Date.now() / 1000
+        updatedAt: Date.now() / 1000,
       });
     } catch (err: any) {
       alert(err.message || 'Không thể bắt đầu đồng bộ lớp học');
@@ -90,76 +165,83 @@ export const ClassesTab: React.FC = () => {
   const handleToggleStudying = async (cItem: ClassItem) => {
     const nextVal = !cItem.isStudying;
     try {
-      // Optimistic update
+      setClasses(prev =>
-      setClasses(prev => prev.map(c => c.rkId === cItem.rkId ? { ...c, isStudying: nextVal } : c));
+        prev.map(c => (c.rkId === cItem.rkId ? { ...c, isStudying: nextVal } : c))
+      );
       await api.updateClassStudying(cItem.rkId, nextVal);
     } catch (err: any) {
-      // Revert if error
+      setClasses(prev =>
-      setClasses(prev => prev.map(c => c.rkId === cItem.rkId ? { ...c, isStudying: !nextVal } : c));
+        prev.map(c => (c.rkId === cItem.rkId ? { ...c, isStudying: !nextVal } : c))
+      );
       alert(err.message || 'Không thể cập nhật trạng thái lớp học');
     }
   };
 
-  // Tính toán % tiến trình sync
+  const syncPercent =
-  const syncPercent = syncStatus && syncStatus.total > 0
+    syncStatus && syncStatus.total > 0
       ? Math.round((syncStatus.synced / syncStatus.total) * 100)
       : 0;
 
-
+  const totalPages = Math.ceil(total / pageSize) || 1;
 
   return (
     <div className="tab-page">
       <div className="tab-page-toolbar">
         <div className="page-header">
           <div className="page-title">
-          <h1>Quản Lý Lớp Học</h1>
+            <h1 className="page-title-heading">
+              <span className="page-title-icon" aria-hidden>
+                <IconGraduation />
+              </span>
+              Quản lý lớp học
+            </h1>
             <p>Đồng bộ dữ liệu lớp học và sinh viên từ hệ thống chính</p>
           </div>
           <button
             className="btn btn-primary"
             onClick={handleStartSync}
             disabled={syncStatus?.running}
-          style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '0.75rem 1.5rem',
+              borderRadius: '12px',
+              fontWeight: 700,
+              boxShadow: '0 4px 14px rgba(187,33,38,0.25)',
+            }}
           >
             {syncStatus?.running ? (
               <>
-              <div className="sync-spinner"></div> Đồng bộ...
+                <div className="sync-spinner" style={{ width: 18, height: 18 }} />
+                Đồng bộ... {syncPercent}%
               </>
             ) : (
               <>
-              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block' }}>
+                <IconRefresh />
-                <path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-              </svg>
                 Đồng bộ Lớp học
               </>
             )}
           </button>
         </div>
 
-      {/* Sync Status Banner */}
         {syncStatus && (syncStatus.running || syncStatus.done || syncStatus.error) && (
           <div className="sync-progress-banner">
             <div className="sync-header">
               <div className="sync-title">
-              {syncStatus.running && <div className="sync-spinner"></div>}
+                {syncStatus.running && <div className="sync-spinner" />}
                 <span>
-                {syncStatus.running && `Đang đồng bộ lớp học... (${syncPercent}%)`}
+                  {syncStatus.running && `Đang đồng bộ... ${syncPercent}%`}
                   {syncStatus.done && (
-                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--success)' }}>
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--success)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <IconCheck />
-                      <polyline points="20 6 9 17 4 12" />
+                      Đồng bộ hoàn tất!
-                    </svg>
-                    Đồng bộ lớp học hoàn tất!
                     </span>
                   )}
                   {syncStatus.error && (
-                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px', color: 'var(--danger)' }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--danger)' }}>
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--danger)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <IconAlert />
-                      <circle cx="12" cy="12" r="10" />
+                      {syncStatus.error}
-                      <line x1="12" y1="8" x2="12" y2="12" />
-                      <line x1="12" y1="16" x2="12.01" y2="16" />
-                    </svg>
-                    Đồng bộ thất bại: {syncStatus.error}
                     </span>
                   )}
                 </span>
@@ -170,7 +252,7 @@ export const ClassesTab: React.FC = () => {
             </div>
             {syncStatus.running && (
               <div className="sync-bar-container">
-              <div className="sync-bar" style={{ width: `${syncPercent}%` }}></div>
+                <div className="sync-bar" style={{ width: `${syncPercent}%` }} />
               </div>
             )}
             <div className="sync-meta">
@@ -180,7 +262,6 @@ export const ClassesTab: React.FC = () => {
           </div>
         )}
 
-      {/* Control bar filters */}
         <div className="control-bar">
           <div className="search-input-wrapper">
             <input
@@ -194,10 +275,7 @@ export const ClassesTab: React.FC = () => {
               }}
             />
             <span className="search-icon">
-            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <IconSearch />
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
             </span>
           </div>
 
@@ -212,10 +290,10 @@ export const ClassesTab: React.FC = () => {
               }}
             >
               <option value="">Tất cả phân hệ</option>
-            <option value="1">Hà Nội (System 1)</option>
+              <option value="1">Hà Nội</option>
-            <option value="2">Hồ Chí Minh (System 2)</option>
+              <option value="2">Hồ Chí Minh</option>
-            <option value="3">Đà Nẵng (System 3)</option>
+              <option value="3">Đà Nẵng</option>
-            <option value="4">Cần Thơ (System 4)</option>
+              <option value="4">Cần Thơ</option>
             </select>
 
             <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.9rem' }}>
@@ -226,7 +304,7 @@ export const ClassesTab: React.FC = () => {
                   setStudyingOnly(e.target.checked);
                   setPage(1);
                 }}
-              style={{ width: '16px', height: '16px', accentColor: 'var(--accent)' }}
+                style={{ width: '18px', height: '18px', accentColor: 'var(--accent)', cursor: 'pointer' }}
               />
               Chỉ xem lớp đang học
             </label>
@@ -234,172 +312,613 @@ export const ClassesTab: React.FC = () => {
         </div>
       </div>
 
-      {/* Classes list table */}
       <div className="tab-page-body">
         <div className="table-wrapper table-fill">
           {loading ? (
             <div className="empty-state">
-            <div className="sync-spinner" style={{ width: '32px', height: '32px' }}></div>
+              <div className="sync-spinner" style={{ width: '40px', height: '40px' }} />
-            <p style={{ marginTop: '0.5rem' }}>Đang tải danh sách lớp học...</p>
+              <p style={{ marginTop: '1rem', fontWeight: 600 }}>Đang tải danh sách lớp học...</p>
             </div>
           ) : classes.length === 0 ? (
             <div className="empty-state">
               <div className="empty-state-icon" style={{ color: 'var(--text-muted)' }}>
-              <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <IconInbox />
-                <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
-                <path d="M6 12v5c0 2 2 3 6 3s6-1 6-3v-5" />
-              </svg>
               </div>
-            <h2>Không tìm thấy lớp học nào</h2>
+              <h2>Không tìm thấy lớp học</h2>
-            <p>Hãy thử thay đổi bộ lọc hoặc bấm nút "Đồng bộ Lớp học" để kéo dữ liệu mới.</p>
+              <p>Hãy thay đổi bộ lọc hoặc bấm "Đồng bộ Lớp học" để kéo dữ liệu mới.</p>
             </div>
           ) : (
-          <table className="data-table">
+            <div className="table-scroll-container">
+              <table className="data-table class-table">
                 <thead>
                   <tr>
-                <th>Mã lớp / ID</th>
+                    <th className="col-code">Mã lớp / ID</th>
-                <th>Tên Lớp học</th>
+                    <th className="col-name">Tên lớp học</th>
-                <th>Phân hệ</th>
+                    <th className="col-system">Phân hệ</th>
-                <th>Môn học của lớp</th>
+                    <th className="col-courses">Môn học</th>
-                <th>Sinh viên</th>
+                    <th className="col-students">Sinh viên</th>
-                <th>Đang dạy</th>
+                    <th className="col-status">Trạng thái</th>
-                <th style={{ textAlign: 'right' }}>Hành động</th>
+                    <th className="col-action">Hành động</th>
                   </tr>
                 </thead>
                 <tbody>
-              {classes.map(cl => (
+                  {classes.map(cl => {
-                <tr key={cl.rkId} style={cl.isStudying ? { background: 'rgba(16, 185, 129, 0.02)' } : {}}>
+                    const isActive = cl.isStudying;
-                  <td>
+                    return (
-                    <div style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{cl.classCode}</div>
+                      <tr key={cl.rkId} className={isActive ? 'row-active' : ''}>
-                    <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>ID: {cl.rkId}</div>
+                        <td className="col-code" data-label="Mã lớp / ID">
+                          <div className="class-code" title={cl.classCode}>{cl.classCode}</div>
+                          <div className="class-id">ID: {cl.rkId}</div>
                         </td>
-                  <td>
+                        <td className="col-name" data-label="Tên lớp học">
                           <div
-                      style={{ fontWeight: 600, color: 'var(--accent)', fontSize: '0.95rem', cursor: 'pointer', textDecoration: 'underline' }}
+                            className="class-name-link"
                             onClick={() => openClass('classes', cl.rkId, cl.name)}
-                      title="Mở Không gian làm việc của lớp"
+                            title={cl.name}
                           >
                             {cl.name}
                           </div>
-                    <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginTop: '0.15rem', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                          <div className="class-specialize">
-                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                            <IconSpecialize />
-                        <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
+                            <span className="class-specialize-text">
-                        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
-                      </svg>
                               {cl.specializeName || 'Chưa có chuyên ngành'}
+                            </span>
                           </div>
                         </td>
-                  <td>
+                        <td className="col-system" data-label="Phân hệ">
-                    <span className="badge badge-muted" style={{ fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                          <span className="badge badge-system">
-                      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
-                        <circle cx="12" cy="10" r="3" />
-                      </svg>
                             {cl.systemName || `Hệ thống ${cl.systemRkId || 'Khác'}`}
                           </span>
                         </td>
-                  <td>
+                        <td className="col-courses" data-label="Môn học">
-                    <div className="courses-tag-list">
+                          <div className="course-tags">
                             {cl.courses && cl.courses.length > 0 ? (
                               cl.courses.map((co, i) => (
-                          <span key={i} className="course-tag">
+                                <span key={i} className="course-tag" title={co.courseName}>
                                   {co.courseName}
                                 </span>
                               ))
                             ) : (
-                        <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>Chưa có môn học</span>
+                              <span className="text-muted-small">Chưa có môn học</span>
                             )}
                           </div>
                         </td>
-                  <td>
+                        <td className="col-students" data-label="Sinh viên">
-                    <span className="badge badge-info" style={{ padding: '0.3rem 0.65rem', borderRadius: '6px', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                          <span className="badge badge-student">
-                      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <IconUsers />
-                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                            <span className="student-count">{cl.studentCount}</span>
-                        <circle cx="12" cy="7" r="4" />
+                            <span>SV</span>
-                      </svg>
-                      {cl.studentCount} SV
                           </span>
                         </td>
-                  <td>
+                        <td className="col-status" data-label="Trạng thái">
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+                          <div className="status-toggle-wrap">
                             <div className="switch-container">
                               <label className="switch">
                                 <input
                                   type="checkbox"
-                            checked={cl.isStudying}
+                                  checked={isActive}
                                   onChange={() => handleToggleStudying(cl)}
                                 />
-                          <span className="slider"></span>
+                                <span className="slider" />
                               </label>
                             </div>
-                      {cl.isStudying ? (
+                            <span className={`status-label ${isActive ? 'active' : 'inactive'}`}>
-                        <span style={{ color: 'var(--success)', fontSize: '0.72rem', display: 'inline-flex', alignItems: 'center', gap: '0.25rem', fontWeight: 700, textTransform: 'uppercase' }}>
+                              {isActive ? 'Đang học' : 'Tạm dừng'}
-                          <span className="pulse-dot-active" style={{ display: 'inline-block', width: '6px', height: '6px', background: '#10b981', borderRadius: '50%', boxShadow: '0 0 6px #10b981' }}></span>
-                          Đang học
                             </span>
-                      ) : (
-                        <span style={{ color: 'var(--text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600 }}>Tạm dừng</span>
-                      )}
                           </div>
                         </td>
-                  <td style={{ textAlign: 'right' }}>
+                        <td className="col-action" data-label="Hành động">
                           <button
-                      className="btn btn-secondary"
+                            className="btn btn-outline"
-                      style={{ padding: '0.5rem 0.95rem', fontSize: '0.8rem', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}
                             onClick={() => openClass('classes', cl.rkId, cl.name)}
                           >
-                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <span className="btn-outline-label">Xem lớp</span>
-                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                            <IconOpen />
-                        <circle cx="9" cy="7" r="4" />
-                        <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-                      </svg>
-                      Xem lớp
                           </button>
                         </td>
                       </tr>
-              ))}
+                    );
+                  })}
                 </tbody>
               </table>
+            </div>
           )}
         </div>
       </div>
 
-      {/* Pagination control bar */}
       {!loading && classes.length > 0 && (
         <div className="tab-page-footer">
           <div className="pagination-row">
-          <div>
+            <div className="pagination-info">
-            Hiển thị lớp thứ <b>{((page - 1) * pageSize) + 1}</b> đến <b>{Math.min(page * pageSize, total)}</b> trong tổng số <b>{total}</b> lớp học
+              Hiển thị <b>{(page - 1) * pageSize + 1}</b> –{' '}
+              <b>{Math.min(page * pageSize, total)}</b> trong tổng số <b>{total}</b> lớp
             </div>
             <div className="pagination-btn-group">
               <button
                 className="pagination-btn"
                 onClick={() => setPage(p => Math.max(1, p - 1))}
                 disabled={page === 1}
-              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+                aria-label="Trang trước"
               >
-              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <IconChevronLeft />
-                <polyline points="15 18 9 12 15 6" />
-              </svg>
               </button>
-            <span style={{ display: 'flex', alignItems: 'center', padding: '0 1rem', fontWeight: 600, color: 'var(--text-primary)' }}>
+              <span className="pagination-current">
-              Trang {page} / {Math.ceil(total / pageSize) || 1}
+                Trang {page} / {totalPages}
               </span>
               <button
                 className="pagination-btn"
                 onClick={() => setPage(p => p + 1)}
-              disabled={page >= Math.ceil(total / pageSize)}
+                disabled={page >= totalPages}
-              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+                aria-label="Trang sau"
               >
-              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <IconChevronRight />
-                <polyline points="9 18 15 12 9 6" />
-              </svg>
               </button>
             </div>
           </div>
         </div>
       )}
+
+      <style>{`
+        .table-wrapper.table-fill {
+          overflow-x: hidden;
+          overflow-y: hidden;
+        }
+
+        .table-scroll-container {
+          overflow-x: hidden;
+          overflow-y: auto;
+          max-height: 100%;
+          height: 100%;
+        }
+
+        .class-table {
+          width: 100%;
+          table-layout: fixed;
+          border-collapse: collapse;
+          font-size: 0.9rem;
+        }
+
+        .class-table thead th {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background: var(--bg-subtle);
+          border-bottom: 2px solid var(--border-color);
+          padding: 0.75rem 0.9rem;
+          font-weight: 700;
+          font-size: 0.72rem;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          color: var(--text-muted);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .class-table td {
+          padding: 0.85rem 0.9rem;
+          border-bottom: 1px solid var(--border-light);
+          vertical-align: middle;
+          overflow: hidden;
+        }
+
+        .class-table .col-code { width: 16%; }
+        .class-table .col-name { width: 22%; }
+        .class-table .col-system { width: 14%; }
+        .class-table .col-courses { width: 16%; }
+        .class-table .col-students { width: 9%; }
+        .class-table .col-status { width: 12%; }
+        .class-table .col-action { width: 11%; text-align: right; }
+
+        .class-table td.col-students,
+        .class-table td.col-status,
+        .class-table td.col-action {
+          vertical-align: middle;
+        }
+
+        .class-table tbody tr {
+          transition: background 0.15s;
+        }
+        .class-table tbody tr:hover {
+          background: var(--bg-subtle) !important;
+        }
+        .class-table tbody tr.row-active {
+          background: rgba(13, 159, 110, 0.02);
+        }
+        .class-table tbody tr.row-active:hover {
+          background: rgba(13, 159, 110, 0.05) !important;
+        }
+
+        .class-code {
+          font-weight: 700;
+          color: var(--text-primary);
+          font-size: 0.9rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .class-id {
+          font-size: 0.72rem;
+          color: var(--text-muted);
+          margin-top: 0.1rem;
+        }
+        .class-name-link {
+          font-weight: 600;
+          color: var(--accent);
+          cursor: pointer;
+          font-size: 0.9rem;
+          transition: color 0.15s;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .class-name-link:hover {
+          color: var(--accent-dark);
+          text-decoration: underline;
+        }
+        .page-title-heading {
+          display: flex;
+          align-items: center;
+          gap: 0.55rem;
+        }
+        .page-title-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--accent);
+          flex-shrink: 0;
+        }
+
+        .class-specialize {
+          font-size: 0.75rem;
+          color: var(--text-secondary);
+          margin-top: 0.15rem;
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          min-width: 0;
+        }
+        .class-specialize svg {
+          opacity: 0.65;
+          flex-shrink: 0;
+        }
+        .class-specialize-text {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .badge-system {
+          background: var(--bg-subtle);
+          color: var(--text-secondary);
+          border: 1px solid var(--border-color);
+          padding: 0.2rem 0.55rem;
+          border-radius: 20px;
+          font-weight: 600;
+          font-size: 0.72rem;
+          display: inline-flex;
+          align-items: center;
+          max-width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .badge-student {
+          background: var(--accent-light);
+          color: var(--accent);
+          border: 1px solid rgba(187,33,38,0.15);
+          padding: 0.2rem 0.55rem;
+          border-radius: 20px;
+          font-weight: 600;
+          font-size: 0.75rem;
+          display: inline-flex;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 4px;
+          white-space: nowrap;
+          min-width: 4.75rem;
+          box-sizing: border-box;
+          line-height: 1.2;
+        }
+        .badge-student svg {
+          flex-shrink: 0;
+          display: block;
+        }
+        .badge-student .student-count {
+          display: inline-block;
+          min-width: 2ch;
+          text-align: right;
+          font-variant-numeric: tabular-nums;
+        }
+        .course-tags {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.25rem;
+          max-width: 100%;
+          align-items: center;
+        }
+        .course-tag {
+          background: var(--bg-subtle);
+          border: 1px solid var(--border-light);
+          padding: 0.1rem 0.45rem;
+          border-radius: 12px;
+          font-size: 0.68rem;
+          color: var(--text-secondary);
+          white-space: nowrap;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .text-muted-small {
+          font-size: 0.75rem;
+          color: var(--text-muted);
+        }
+
+        .status-toggle-wrap {
+          display: flex;
+          align-items: center;
+          gap: 0.45rem;
+          min-width: 0;
+        }
+        .status-label {
+          font-size: 0.68rem;
+          font-weight: 700;
+          text-transform: uppercase;
+          letter-spacing: 0.03em;
+          white-space: nowrap;
+        }
+        .status-label.active {
+          color: var(--success);
+        }
+        .status-label.inactive {
+          color: var(--text-muted);
+        }
+
+        .btn-outline {
+          background: transparent;
+          border: 1px solid var(--border-color);
+          color: var(--text-primary);
+          padding: 0.35rem 0.75rem;
+          border-radius: 8px;
+          font-weight: 600;
+          font-size: 0.78rem;
+          transition: all 0.15s;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.3rem;
+          cursor: pointer;
+          white-space: nowrap;
+          line-height: 1;
+          height: 32px;
+          box-sizing: border-box;
+        }
+        .btn-outline:hover {
+          border-color: var(--accent);
+          color: var(--accent);
+          background: var(--accent-light);
+        }
+
+        .pagination-info {
+          font-size: 0.85rem;
+          color: var(--text-secondary);
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+        .pagination-current {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          height: 34px;
+          line-height: 1;
+          font-weight: 700;
+          color: var(--text-primary);
+          padding: 0 0.75rem;
+          white-space: nowrap;
+        }
+        .pagination-btn-group {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.4rem;
+        }
+
+        /* Medium: drop secondary columns, no horizontal scroll */
+        @media (max-width: 1280px) {
+          .class-table .col-courses {
+            display: none;
+          }
+          .class-table .col-code { width: 18%; }
+          .class-table .col-name { width: 28%; }
+          .class-table .col-system { width: 16%; }
+          .class-table .col-students { width: 10%; }
+          .class-table .col-status { width: 14%; }
+          .class-table .col-action { width: 14%; }
+        }
+
+        @media (max-width: 1100px) {
+          .class-table .col-system {
+            display: none;
+          }
+          .class-table .col-code { width: 20%; }
+          .class-table .col-name { width: 36%; }
+          .class-table .col-students { width: 12%; }
+          .class-table .col-status { width: 16%; }
+          .class-table .col-action { width: 16%; }
+          .status-label {
+            display: none;
+          }
+          .btn-outline {
+            padding: 0.35rem 0.55rem;
+          }
+          .btn-outline-label {
+            display: none;
+          }
+        }
+
+        /* Card layout before horizontal overflow kicks in */
+        @media (max-width: 960px) {
+          .table-scroll-container {
+            overflow-x: hidden;
+          }
+          .class-table {
+            table-layout: auto;
+          }
+          .class-table thead {
+            display: none;
+          }
+          .class-table tbody tr {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0.5rem 1rem;
+            padding: 1rem;
+            border-radius: var(--radius-lg);
+            background: var(--bg-card);
+            box-shadow: var(--shadow-sm);
+            border: 1px solid var(--border-color);
+            margin-bottom: 0.75rem;
+          }
+          .class-table tbody tr.row-active {
+            border-left: 4px solid var(--success);
+          }
+          .class-table .col-courses,
+          .class-table .col-system {
+            display: flex;
+          }
+          .class-table td {
+            display: flex;
+            flex-direction: column;
+            padding: 0 !important;
+            border: none !important;
+            gap: 0.1rem;
+            overflow: visible;
+            width: auto !important;
+          }
+          .class-table td::before {
+            content: attr(data-label);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            margin-bottom: 0.1rem;
+          }
+          .class-table td.col-action {
+            grid-column: span 2;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.75rem;
+            margin-top: 0.5rem;
+            padding-top: 0.5rem !important;
+            border-top: 1px dashed var(--border-color) !important;
+          }
+          .class-table td.col-action::before {
+            margin-bottom: 0;
+            line-height: 1;
+          }
+          .class-code,
+          .class-name-link,
+          .class-specialize-text,
+          .badge-system {
+            white-space: normal;
+            overflow: visible;
+            text-overflow: unset;
+          }
+          .status-label {
+            display: inline;
+          }
+          .btn-outline-label {
+            display: inline;
+          }
+          .class-code {
+            font-size: 0.85rem;
+          }
+          .class-name-link {
+            font-size: 0.85rem;
+          }
+          .class-id {
+            font-size: 0.65rem;
+          }
+          .class-specialize {
+            font-size: 0.7rem;
+          }
+          .badge-system,
+          .badge-student {
+            font-size: 0.65rem;
+            padding: 0.15rem 0.5rem;
+          }
+          .course-tag {
+            font-size: 0.6rem;
+          }
+          .status-label {
+            font-size: 0.6rem;
+          }
+          .btn-outline {
+            font-size: 0.7rem;
+            padding: 0.3rem 0.8rem;
+          }
+          .pagination-row {
+            flex-direction: column;
+            gap: 0.75rem;
+            align-items: center;
+            text-align: center;
+          }
+          .pagination-info {
+            font-size: 0.75rem;
+          }
+          .page-header {
+            flex-direction: column;
+            align-items: stretch;
+          }
+          .page-header .btn {
+            width: 100%;
+            justify-content: center;
+          }
+          .control-bar {
+            flex-direction: column;
+            align-items: stretch;
+          }
+          .search-input-wrapper {
+            max-width: 100%;
+          }
+          .filters-wrapper {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 0.6rem;
+          }
+          .select-filter {
+            width: 100%;
+          }
+        }
+
+        @media (max-width: 480px) {
+          .class-table tbody tr {
+            padding: 0.75rem;
+            gap: 0.4rem 0.75rem;
+          }
+          .class-code {
+            font-size: 0.8rem;
+          }
+          .class-name-link {
+            font-size: 0.8rem;
+          }
+          .badge-system,
+          .badge-student {
+            font-size: 0.6rem;
+            padding: 0.1rem 0.4rem;
+          }
+          .btn-outline {
+            font-size: 0.65rem;
+            padding: 0.2rem 0.6rem;
+          }
+          .pagination-btn-group .pagination-btn {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      `}</style>
     </div>
   );
 };

management/src/components/ExamGridProctor.tsx

@@ -1,6 +1,86 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { getWsUrl, type ExamRoomStudent } from '../api';
+import { type ExamRoomStudent } from '../api';
 import { openStaffChat } from '../chatEvents';
+import { StudentStreamImage } from './StudentStreamImage';
+
+/* ─── Icons ──────────────────────────────────────────────────────────────── */
+
+type IconProps = { size?: number };
+
+const IconSearch = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="11" cy="11" r="7" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const IconMaximize = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+    <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+    <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+    <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+  </svg>
+);
+
+const IconMinimize = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M8 3v3a2 2 0 0 1-2 2H3" />
+    <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+    <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+    <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+  </svg>
+);
+
+const IconOffline = ({ size = 28 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="2" y="3" width="20" height="14" rx="2" />
+    <line x1="8" y1="21" x2="16" y2="21" />
+    <line x1="12" y1="17" x2="12" y2="21" />
+    <line x1="2" y1="3" x2="22" y2="21" />
+  </svg>
+);
+
+const IconMessage = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+  </svg>
+);
+
+const IconEye = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+
+const IconFile = ({ size = 12 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+  </svg>
+);
+
+const IconClose = ({ size = 18 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const IconChevronLeft = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="15 18 9 12 15 6" />
+  </svg>
+);
+
+const IconChevronRight = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
+
+/* ─── Component ──────────────────────────────────────────────────────────── */
 
 interface ExamGridProctorProps {
   students: ExamRoomStudent[];
@@ -13,8 +93,6 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
   onlineIds,
   onSelectStudent,
 }) => {
-  const [screenFrames, setScreenFrames] = useState<Record<number, string>>({});
-  const [webcamFrames, setWebcamFrames] = useState<Record<number, string>>({});
   const [gridCols, setGridCols] = useState<number>(3);
   const [showWebcamOverlay, setShowWebcamOverlay] = useState<boolean>(true);
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -24,33 +102,23 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
   const [pageSize, setPageSize] = useState<number | 'all'>(12);
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  const wsRef = useRef<WebSocket | null>(null);
-  const subscribedRef = useRef<Set<number>>(new Set());
   const gridContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === 'Escape') setZoomedStudent(null);
-        setZoomedStudent(null);
-      }
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, []);
 
-  const studentIdsString = useMemo(
-    () => students.map((s) => s.studentRkId).join(','),
-    [students]
-  );
-
   const filteredStudents = useMemo(() => {
     return students.filter((s) => {
       const matchesSearch =
         s.fullName.toLowerCase().includes(searchQuery.toLowerCase()) ||
         s.studentCode.toLowerCase().includes(searchQuery.toLowerCase());
       const isOnline = onlineIds.includes(s.studentRkId);
-      const matchesOnlineFilter = !onlyOnline || isOnline;
+      return matchesSearch && (!onlyOnline || isOnline);
-      return matchesSearch && matchesOnlineFilter;
     });
   }, [students, onlineIds, searchQuery, onlyOnline]);
 
@@ -66,165 +134,9 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
   }, [filteredStudents, pageSize]);
 
   useEffect(() => {
-    if (currentPage > totalPages) {
+    if (currentPage > totalPages) setCurrentPage(totalPages);
-      setCurrentPage(totalPages);
-    }
   }, [totalPages, currentPage]);
 
-  const visibleOnlineIds = useMemo(() => {
-    return pagedStudents
-      .map((s) => s.studentRkId)
-      .filter((id) => onlineIds.includes(id));
-  }, [pagedStudents, onlineIds]);
-
-  const visibleOnlineIdsRef = useRef<number[]>(visibleOnlineIds);
-  visibleOnlineIdsRef.current = visibleOnlineIds;
-
-  const onlineKey = useMemo(() => visibleOnlineIds.join(','), [visibleOnlineIds]);
-
-  const syncSubscriptions = (ws: WebSocket) => {
-    if (ws.readyState !== WebSocket.OPEN) return;
-    const currentVisibleIds = visibleOnlineIdsRef.current;
-    const target = new Set(currentVisibleIds);
-    const prev = subscribedRef.current;
-
-    prev.forEach((id) => {
-      if (!target.has(id)) {
-        ws.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId: id } }));
-        prev.delete(id);
-      }
-    });
-    currentVisibleIds.forEach((id) => {
-      if (!prev.has(id)) {
-        ws.send(JSON.stringify({ event: 'teacher:subscribe', data: { studentId: id } }));
-        prev.add(id);
-      }
-    });
-  };
-
-  useEffect(() => {
-    const ws = wsRef.current;
-    if (ws) syncSubscriptions(ws);
-  }, [onlineKey]);
-
-  useEffect(() => {
-    if (students.length === 0) return;
-
-    const wsUrl = getWsUrl('/ws?role=teacher');
-    let closed = false;
-    let retryTimer: ReturnType<typeof setTimeout> | null = null;
-    let pingTimer: ReturnType<typeof setInterval> | null = null;
-    let attempt = 0;
-
-    const clearPing = () => {
-      if (pingTimer) {
-        clearInterval(pingTimer);
-        pingTimer = null;
-      }
-    };
-
-    const connect = () => {
-      if (closed) return;
-
-      const ws = new WebSocket(wsUrl);
-      wsRef.current = ws;
-      subscribedRef.current = new Set();
-
-      ws.onopen = () => {
-        attempt = 0;
-        syncSubscriptions(ws);
-        clearPing();
-        pingTimer = setInterval(() => {
-          if (ws.readyState === WebSocket.OPEN) {
-            ws.send(JSON.stringify({ event: 'client:ping', data: {} }));
-          }
-        }, 15000);
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data);
-          if (msg.event === 'client:pong') return;
-          if (msg.event === 'teacher:screenshot-stream-frame') {
-            const { studentId, imageBuffer } = msg.data;
-            setScreenFrames((prev) => ({ ...prev, [studentId]: imageBuffer }));
-          } else if (msg.event === 'teacher:webcam-stream-frame') {
-            const { studentId, imageBuffer } = msg.data;
-            setWebcamFrames((prev) => ({ ...prev, [studentId]: imageBuffer }));
-          } else if (msg.event === 'teacher:stream-stopped') {
-            const { studentId } = msg.data;
-            setScreenFrames((prev) => {
-              const next = { ...prev };
-              delete next[studentId];
-              return next;
-            });
-            setWebcamFrames((prev) => {
-              const next = { ...prev };
-              delete next[studentId];
-              return next;
-            });
-          }
-        } catch (err) {
-          console.error('Error parsing WS message in grid view:', err);
-        }
-      };
-
-      ws.onclose = () => {
-        clearPing();
-        subscribedRef.current = new Set();
-        if (!closed) {
-          const delay = Math.min(1000 * 2 ** Math.min(attempt++, 4), 10000);
-          retryTimer = setTimeout(connect, delay);
-        }
-      };
-    };
-
-    connect();
-
-    return () => {
-      closed = true;
-      clearPing();
-      if (retryTimer) clearTimeout(retryTimer);
-      const ws = wsRef.current;
-      if (ws?.readyState === WebSocket.OPEN) {
-        subscribedRef.current.forEach((id) => {
-          ws.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId: id } }));
-        });
-      }
-      ws?.close();
-      wsRef.current = null;
-      subscribedRef.current = new Set();
-    };
-  }, [studentIdsString]);
-
-  // Clean up frames when students are removed or go offline
-  useEffect(() => {
-    setScreenFrames((prev) => {
-      const next = { ...prev };
-      let changed = false;
-      Object.keys(next).forEach((idStr) => {
-        const id = Number(idStr);
-        if (!onlineIds.includes(id)) {
-          delete next[id];
-          changed = true;
-        }
-      });
-      return changed ? next : prev;
-    });
-    setWebcamFrames((prev) => {
-      const next = { ...prev };
-      let changed = false;
-      Object.keys(next).forEach((idStr) => {
-        const id = Number(idStr);
-        if (!onlineIds.includes(id)) {
-          delete next[id];
-          changed = true;
-        }
-      });
-      return changed ? next : prev;
-    });
-  }, [onlineIds]);
-
   const handleOpenChat = (s: ExamRoomStudent, e: React.MouseEvent) => {
     e.stopPropagation();
     openStaffChat({
@@ -257,39 +169,31 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
     <div className={`grid-proctor-container ${isFullscreen ? 'fullscreen-active' : ''}`} ref={gridContainerRef}>
       <div className="grid-proctor-toolbar">
         <div className="grid-proctor-toolbar-left">
-          <div className="search-input-wrapper">
+          <div className="gp-search">
+            <span className="gp-search-icon"><IconSearch size={14} /></span>
             <input
-              type="text"
+              type="search"
-              className="search-input"
+              className="search-input gp-search-input"
               placeholder="Lọc sinh viên..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
             />
-            <span className="search-icon">🔍</span>
           </div>
 
-          <label className="checkbox-label" style={{ display: 'flex', alignItems: 'center', gap: '0.35rem', cursor: 'pointer', fontSize: '0.85rem', color: 'var(--text-primary)' }}>
+          <label className="gp-check">
-            <input
+            <input type="checkbox" checked={onlyOnline} onChange={(e) => setOnlyOnline(e.target.checked)} />
-              type="checkbox"
-              checked={onlyOnline}
-              onChange={(e) => setOnlyOnline(e.target.checked)}
-            />
             <span>Chỉ hiện Online</span>
           </label>
 
-          <label className="checkbox-label" style={{ display: 'flex', alignItems: 'center', gap: '0.35rem', cursor: 'pointer', fontSize: '0.85rem', color: 'var(--text-primary)' }}>
+          <label className="gp-check">
-            <input
+            <input type="checkbox" checked={showWebcamOverlay} onChange={(e) => setShowWebcamOverlay(e.target.checked)} />
-              type="checkbox"
-              checked={showWebcamOverlay}
-              onChange={(e) => setShowWebcamOverlay(e.target.checked)}
-            />
             <span>Đè webcam góc màn hình</span>
           </label>
         </div>
 
         <div className="grid-proctor-toolbar-right">
-          <div className="grid-cols-selector" style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
+          <label className="gp-page-size">
-            <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Xem tối đa:</span>
+            <span>Xem tối đa</span>
             <select
               value={pageSize}
               onChange={(e) => {
@@ -297,79 +201,42 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
                 setPageSize(val === 'all' ? 'all' : Number(val));
                 setCurrentPage(1);
               }}
-              style={{
-                fontSize: '0.75rem',
-                padding: '0.2rem 0.4rem',
-                borderRadius: '4px',
-                border: '1px solid var(--border-color)',
-                backgroundColor: 'var(--bg-card)',
-                color: 'var(--text-primary)',
-                fontWeight: 600,
-                cursor: 'pointer',
-              }}
             >
               <option value={12}>12 bạn</option>
               <option value={24}>24 bạn</option>
               <option value={48}>48 bạn</option>
               <option value="all">Tất cả</option>
             </select>
+          </label>
+
+          <div className="grid-cols-selector" role="group" aria-label="Số cột">
+            <span className="gp-cols-label">Cột</span>
+            {[2, 3, 4, 6].map((n) => (
+              <button
+                key={n}
+                type="button"
+                className={gridCols === n ? 'active' : ''}
+                onClick={() => setGridCols(n)}
+              >
+                {n}
+              </button>
+            ))}
           </div>
 
-          <div className="grid-cols-selector">
+          <button type="button" className="btn btn-secondary btn-sm gp-fs-btn" onClick={toggleFullscreen}>
-            <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Cột:</span>
+            {isFullscreen ? <IconMinimize size={13} /> : <IconMaximize size={13} />}
-            <button
+            {isFullscreen ? 'Thu nhỏ' : 'Toàn màn hình'}
-              type="button"
-              className={`btn btn-secondary btn-xs ${gridCols === 2 ? 'active' : ''}`}
-              onClick={() => setGridCols(2)}
-            >
-              2
-            </button>
-            <button
-              type="button"
-              className={`btn btn-secondary btn-xs ${gridCols === 3 ? 'active' : ''}`}
-              onClick={() => setGridCols(3)}
-            >
-              3
-            </button>
-            <button
-              type="button"
-              className={`btn btn-secondary btn-xs ${gridCols === 4 ? 'active' : ''}`}
-              onClick={() => setGridCols(4)}
-            >
-              4
-            </button>
-            <button
-              type="button"
-              className={`btn btn-secondary btn-xs ${gridCols === 6 ? 'active' : ''}`}
-              onClick={() => setGridCols(6)}
-            >
-              6
-            </button>
-          </div>
-
-          <button
-            type="button"
-            className="btn btn-secondary btn-sm"
-            onClick={toggleFullscreen}
-          >
-            {isFullscreen ? '🖥️ Thu nhỏ' : '🖥️ Toàn màn hình'}
           </button>
         </div>
       </div>
 
+      <div className="grid-proctor-scroll">
       <div
-        className={`grid-proctor-layout`}
+        className="grid-proctor-layout"
-        style={{
+        style={{ gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))` }}
-          display: 'grid',
-          gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
-          gap: '1rem',
-          padding: '1rem 0',
-        }}
       >
         {pagedStudents.map((s) => {
           const isOnline = onlineIds.includes(s.studentRkId);
-          const screenFrame = screenFrames[s.studentRkId];
-          const webcamFrame = webcamFrames[s.studentRkId];
 
           return (
             <div
@@ -380,9 +247,7 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
               <div className="grid-proctor-card-header">
                 <div className="student-info-left">
                   <span className={`status-dot ${isOnline ? 'online' : 'offline'}`} />
-                  <span className="student-name" title={s.fullName}>
+                  <span className="student-name" title={s.fullName}>{s.fullName}</span>
-                    {s.fullName}
-                  </span>
                 </div>
                 <span className="student-code">{s.studentCode}</span>
               </div>
@@ -395,61 +260,54 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
                       e.stopPropagation();
                       setZoomedStudent(s);
                     }}
-                    style={{ cursor: 'zoom-in' }}
                   >
-                    {screenFrame ? (
+                    <StudentStreamImage
-                      <img
+                      studentId={s.studentRkId}
-                        src={screenFrame}
+                      kind="screen"
-                        alt={`Màn hình ${s.fullName}`}
                       className="proctor-screen-image"
-                        draggable={false}
                     />
-                    ) : (
+                    {showWebcamOverlay && (
-                      <div className="proctor-placeholder streaming">
-                        <div className="sync-spinner" style={{ width: '20px', height: '20px', borderWidth: '2px', marginBottom: '0.5rem' }} />
-                        <span>Đang kết nối màn hình...</span>
-                      </div>
-                    )}
-
-                    {showWebcamOverlay && webcamFrame && (
                       <div className="proctor-webcam-overlay">
-                        <img
+                        <StudentStreamImage
-                          src={webcamFrame}
+                          studentId={s.studentRkId}
-                          alt={`Webcam ${s.fullName}`}
+                          kind="webcam"
                           className="proctor-webcam-image"
-                          draggable={false}
                         />
                       </div>
                     )}
                   </div>
                 ) : (
                   <div className="proctor-placeholder offline">
-                    <span className="icon">📴</span>
+                    <span className="gp-offline-icon"><IconOffline size={26} /></span>
-                    <span>Ngoại tuyến (Offline)</span>
+                    <span className="gp-offline-label">Ngoại tuyến</span>
+                    <span className="gp-offline-sub">Offline</span>
                   </div>
                 )}
               </div>
 
               <div className="grid-proctor-card-footer" onClick={(e) => e.stopPropagation()}>
                 <span className="assigned-paper" title={s.paperTitle || 'Chưa gán đề'}>
-                  {s.paperTitle ? `Đề: ${s.paperTitle}` : 'Chưa gán đề'}
+                  <IconFile size={12} />
+                  {s.paperTitle ? s.paperTitle : 'Chưa gán đề'}
                 </span>
                 <div className="footer-actions">
                   <button
                     type="button"
-                    className="btn btn-ghost btn-xs text-primary"
+                    className="gp-action-btn"
                     onClick={(e) => handleOpenChat(s, e)}
                     title="Nhắn tin cho sinh viên"
                   >
-                    💬 Nhắn tin
+                    <IconMessage size={13} />
+                    Nhắn tin
                   </button>
                   <button
                     type="button"
-                    className="btn btn-ghost btn-xs"
+                    className="gp-action-btn gp-action-btn--primary"
                     onClick={() => onSelectStudent(s)}
                     title="Xem chi tiết giám sát"
                   >
-                    🔍 Giám sát
+                    <IconEye size={13} />
+                    Giám sát
                   </button>
                 </div>
               </div>
@@ -458,214 +316,77 @@ export const ExamGridProctor: React.FC<ExamGridProctorProps> = ({
         })}
 
         {filteredStudents.length === 0 && (
-          <div className="grid-proctor-empty" style={{ gridColumn: '1 / -1' }}>
+          <div className="grid-proctor-empty">
-            <span>🔍</span>
+            <span className="gp-empty-icon"><IconSearch size={28} /></span>
             <p>Không tìm thấy sinh viên nào.</p>
           </div>
         )}
       </div>
 
-      {/* Pagination Controls */}
       {totalPages > 1 && (
-        <div
+        <div className="grid-proctor-pagination">
-          className="grid-proctor-pagination"
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '1rem',
-            padding: '1rem 0',
-            borderTop: '1px solid var(--border-light)',
-            marginTop: '1.25rem',
-          }}
-        >
           <button
             type="button"
-            className="btn btn-secondary btn-sm"
+            className="btn btn-secondary btn-sm gp-page-btn"
             disabled={currentPage === 1}
             onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-            style={{ fontWeight: 600 }}
           >
-            &larr; Trang trước
+            <IconChevronLeft size={14} />
+            Trang trước
           </button>
-          <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', fontWeight: 600 }}>
+          <span className="gp-page-info">
-            Trang {currentPage} / {totalPages} (Tổng {filteredStudents.length} bạn)
+            Trang {currentPage} / {totalPages}
+            <span className="gp-page-total"> · {filteredStudents.length} bạn</span>
           </span>
           <button
             type="button"
-            className="btn btn-secondary btn-sm"
+            className="btn btn-secondary btn-sm gp-page-btn"
             disabled={currentPage === totalPages}
             onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
-            style={{ fontWeight: 600 }}
           >
-            Trang sau &rarr;
+            Trang sau
+            <IconChevronRight size={14} />
           </button>
         </div>
       )}
+      </div>
 
-      {/* Zoom Modal Overlay (Rendered inside the container so it works in fullscreen mode) */}
       {zoomedStudent && (
-        <div
+        <div className="zoomed-proctor-overlay" onClick={() => setZoomedStudent(null)}>
-          className="zoomed-proctor-overlay"
+          <div className="zoomed-proctor-modal" onClick={(e) => e.stopPropagation()}>
-          onClick={() => setZoomedStudent(null)}
+            <div className="zoomed-proctor-header">
-          style={{
+              <div className="zoomed-proctor-title">
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(10, 15, 30, 0.9)',
-            backdropFilter: 'blur(8px)',
-            zIndex: 9999,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '2rem',
-            animation: 'fadeIn 0.2s ease-out',
-          }}
-        >
-          <div
-            className="zoomed-proctor-modal"
-            onClick={(e) => e.stopPropagation()}
-            style={{
-              width: '100%',
-              maxWidth: '1000px',
-              backgroundColor: 'var(--bg-card)',
-              border: '1px solid var(--border-color)',
-              borderRadius: '16px',
-              boxShadow: '0 20px 40px rgba(0, 0, 0, 0.4)',
-              display: 'flex',
-              flexDirection: 'column',
-              maxHeight: '90%',
-              overflow: 'hidden',
-            }}
-          >
-            {/* Modal Header */}
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                padding: '1rem 1.5rem',
-                borderBottom: '1px solid var(--border-color)',
-                backgroundColor: 'var(--bg-subtle)',
-              }}
-            >
-              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                 <span
-                  style={{
+                  className={`status-dot ${onlineIds.includes(zoomedStudent.studentRkId) ? 'online' : 'offline'}`}
-                    width: '10px',
-                    height: '10px',
-                    borderRadius: '50%',
-                    backgroundColor: onlineIds.includes(zoomedStudent.studentRkId) ? 'var(--success)' : 'var(--danger)',
-                    boxShadow: onlineIds.includes(zoomedStudent.studentRkId) ? '0 0 8px var(--success)' : 'none',
-                  }}
                 />
-                <h3 style={{ margin: 0, color: 'var(--text-primary)', fontSize: '1.1rem', fontWeight: 600 }}>
+                <h3>{zoomedStudent.fullName}</h3>
-                  {zoomedStudent.fullName}
+                <span className="student-code">{zoomedStudent.studentCode}</span>
-                </h3>
-                <span
-                  style={{
-                    fontFamily: 'monospace',
-                    fontSize: '0.85rem',
-                    color: 'var(--text-secondary)',
-                    backgroundColor: 'var(--bg-subtle)',
-                    padding: '2px 8px',
-                    borderRadius: '4px',
-                  }}
-                >
-                  {zoomedStudent.studentCode}
-                </span>
               </div>
-              <button
+              <button type="button" className="zoomed-proctor-close" onClick={() => setZoomedStudent(null)} aria-label="Đóng">
-                onClick={() => setZoomedStudent(null)}
+                <IconClose size={18} />
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  color: 'var(--text-secondary)',
-                  fontSize: '1.5rem',
-                  cursor: 'pointer',
-                  padding: '4px 8px',
-                  lineHeight: 1,
-                }}
-              >
-                &times;
               </button>
             </div>
-
+            <div className="zoomed-proctor-body">
-            {/* Modal Body */}
+              <div className="zoomed-proctor-frame">
-            <div
+                <StudentStreamImage
-              style={{
+                  studentId={zoomedStudent.studentRkId}
-                flex: 1,
+                  kind="screen"
-                padding: '1.5rem',
+                  className="zoomed-proctor-screen"
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: '#000',
-                position: 'relative',
-                minHeight: '400px',
-                overflow: 'hidden',
-              }}
-            >
-              {screenFrames[zoomedStudent.studentRkId] ? (
-                <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                  <img
-                    src={screenFrames[zoomedStudent.studentRkId]}
-                    alt="Zoomed Screen"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '65vh',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                    }}
                 />
-                  {showWebcamOverlay && webcamFrames[zoomedStudent.studentRkId] && (
+                {showWebcamOverlay && (
-                    <div
+                  <div className="zoomed-proctor-webcam">
-                      style={{
+                    <StudentStreamImage
-                        position: 'absolute',
+                      studentId={zoomedStudent.studentRkId}
-                        bottom: '20px',
+                      kind="webcam"
-                        right: '20px',
+                      className="proctor-webcam-image"
-                        width: '240px',
-                        aspectRatio: '4/3',
-                        borderRadius: '8px',
-                        border: '2px solid #ffffff',
-                        boxShadow: '0 8px 16px rgba(0, 0, 0, 0.4)',
-                        overflow: 'hidden',
-                        backgroundColor: '#000',
-                      }}
-                    >
-                      <img
-                        src={webcamFrames[zoomedStudent.studentRkId]}
-                        alt="Zoomed Webcam"
-                        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                     />
                   </div>
                 )}
               </div>
-              ) : (
-                <div style={{ color: '#8e8e9e', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}>
-                  <div className="sync-spinner" style={{ width: '32px', height: '32px', borderWidth: '3px', marginBottom: '0.5rem' }} />
-                  <span>Đang tải màn hình...</span>
-                </div>
-              )}
             </div>
           </div>
         </div>
       )}
-
-      <style>{`
-        .cursor-zoom-in {
-          transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-        .cursor-zoom-in:hover {
-          transform: scale(1.015);
-          box-shadow: 0 6px 16px rgba(0,0,0,0.3);
-        }
-        @keyframes fadeIn {
-          from { opacity: 0; }
-          to { opacity: 1; }
-        }
-      `}</style>
     </div>
   );
 };

management/src/components/ExamRoomWorkspace.tsx

@@ -26,6 +26,101 @@ import { ViolationsPanel } from './ViolationsPanel';
 
 const EXAM_APP_SUGGESTIONS = [...new Set([...BASE_APP_SUGGESTIONS, 'msedge', 'edge', 'acrobat', 'foxit'])];
 
+/* ─── Icons (match ClassWorkspace) ───────────────────────────────────────── */
+type IconProps = { size?: number };
+
+const IconExam = ({ size = 20 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="9" y1="13" x2="15" y2="13" />
+    <line x1="9" y1="17" x2="13" y2="17" />
+  </svg>
+);
+
+const IconSettings = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
+  </svg>
+);
+
+const IconClose = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M18 6 6 18M6 6l12 12" />
+  </svg>
+);
+
+const IconMap = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" />
+    <line x1="9" y1="3" x2="9" y2="18" />
+    <line x1="15" y1="6" x2="15" y2="21" />
+  </svg>
+);
+
+const IconMonitor = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="2" y="3" width="20" height="14" rx="2" />
+    <path d="M8 21h8M12 17v4" />
+  </svg>
+);
+
+const IconList = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <line x1="8" y1="6" x2="21" y2="6" />
+    <line x1="8" y1="12" x2="21" y2="12" />
+    <line x1="8" y1="18" x2="21" y2="18" />
+    <line x1="3" y1="6" x2="3.01" y2="6" />
+    <line x1="3" y1="12" x2="3.01" y2="12" />
+    <line x1="3" y1="18" x2="3.01" y2="18" />
+  </svg>
+);
+
+const IconPackage = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+    <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+    <line x1="12" y1="22.08" x2="12" y2="12" />
+  </svg>
+);
+
+const IconShield = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+  </svg>
+);
+
+const IconSearch = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="11" cy="11" r="7" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const IconUsers = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="3.5" />
+    <path d="M22 21v-2a3.5 3.5 0 0 0-2.5-3.35" />
+    <path d="M16 3.5a3.5 3.5 0 0 1 0 7" />
+  </svg>
+);
+
+const IconPlus = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+
+const IconInbox = ({ size = 36 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
 interface Props {
   examId: number;
   onBack: () => void;
@@ -70,6 +165,8 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
   const [canPublish, setCanPublish] = useState(false);
   const [canUnpublish, setCanUnpublish] = useState(false);
   const [canCancel, setCanCancel] = useState(false);
+  const [canExtend, setCanExtend] = useState(false);
+  const [extending, setExtending] = useState(false);
   const [papers, setPapers] = useState<ExamPaper[]>([]);
   const [students, setStudents] = useState<ExamRoomStudent[]>([]);
   const [submissions, setSubmissions] = useState<ExamSubmission[]>([]);
@@ -101,6 +198,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
   const canEditApps = displayStatus === 'draft' || displayStatus === 'ready' || displayStatus === 'active';
   const anyPaperSent = students.some((s) => s.paperSentAt);
   const canModifyPapers = prepEditable || (!anyPaperSent && (displayStatus === 'draft' || displayStatus === 'ready' || displayStatus === 'active'));
+  const canRemoveStudents = displayStatus !== 'ended' && displayStatus !== 'cancelled';
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -118,6 +216,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
       setCanPublish(data.canPublish);
       setCanUnpublish(data.canUnpublish);
       setCanCancel(data.canCancel);
+      setCanExtend(!!data.canExtend || data.displayStatus === 'active');
       setPapers(data.papers);
       setStudents(data.students);
       pushNav({
@@ -231,6 +330,20 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
     }
   };
 
+  const saveExtendedEndTime = async () => {
+    setErr(''); setMsg('');
+    setSaving(true);
+    try {
+      await apiExam.update(examId, { endTime: localInputToISO(end) });
+      setMsg('Đã gia hạn giờ kết thúc phòng thi');
+      await load();
+    } catch (e: any) {
+      setErr(e?.message || 'Lỗi');
+    } finally {
+      setSaving(false);
+    }
+  };
+
   const addStudent = async (studentRkId: number) => {
     await apiExam.addStudents(examId, [studentRkId]);
     await load();
@@ -575,6 +688,21 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
     }
   };
 
+  const handleExtend = async (minutes: number) => {
+    if (!confirm(`Gia hạn thêm ${minutes} phút cho phòng thi đang diễn ra?`)) return;
+    setErr(''); setMsg('');
+    setExtending(true);
+    try {
+      const res = await apiExam.extend(examId, minutes);
+      setMsg(`Đã gia hạn +${minutes} phút — kết thúc lúc ${fmtTime(res.endTime)}`);
+      await load();
+    } catch (e: any) {
+      setErr(e?.message || 'Gia hạn thất bại');
+    } finally {
+      setExtending(false);
+    }
+  };
+
   const filteredStudents = students.filter((s) => {
     const term = searchQuery.toLowerCase().trim();
     if (!term) return true;
@@ -627,11 +755,12 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
         <div className={`alert-banner ${err ? 'alert-error' : 'alert-success'}`}>{err || msg}</div>
       )}
 
-      <div className="workspace-header">
+      <div className="workspace-header ew-header">
-        <div>
+        <div className="ew-header-left">
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <div className="ew-brand-icon">
-            <div className="brand-logo" style={{ width: 44, height: 44, fontSize: '1.1rem' }}>📝</div>
+            <IconExam size={20} />
-            <div>
+          </div>
+          <div className="ew-title-block">
             <h1 className="workspace-class-title">{roomName || 'Phòng thi'}</h1>
             <div className="class-badge-container">
               <span className={`badge ${badge.cls}`}>{badge.text}</span>
@@ -645,19 +774,16 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
             </div>
           </div>
         </div>
-        </div>
 
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1.25rem', flexWrap: 'wrap' }}>
+        <div className="ew-header-right">
-          <div className="status-panel">
+          <div className="status-panel ew-status-panel">
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div className="ew-status-label-group">
-              <span style={{ fontSize: '0.72rem', color: 'var(--text-muted)', fontWeight: 600, textTransform: 'uppercase' }}>
+              <span className="ew-meta-label">Trạng thái thi</span>
-                Trạng thái thi
+              <span className="ew-status-value" style={{ color: statusColor(displayStatus) }}>
-              </span>
-              <span style={{ fontSize: '0.875rem', fontWeight: 700, color: statusColor(displayStatus) }}>
                 {badge.text}
               </span>
             </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+            <div className="ew-status-actions">
               {canPublish && (
                 <button type="button" className="btn btn-primary btn-sm" onClick={handlePublish}>Đẩy phòng thi</button>
               )}
@@ -667,21 +793,38 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
               {canCancel && (
                 <button type="button" className="btn btn-secondary btn-sm learning-btn-danger" onClick={handleCancel}>Hủy</button>
               )}
+              {canExtend && (
+                <div className="ew-extend-row">
+                  <span className="ew-meta-label">Gia hạn</span>
+                  {[15, 30, 60].map((m) => (
+                    <button
+                      key={m}
+                      type="button"
+                      className="btn btn-primary btn-sm"
+                      disabled={extending}
+                      onClick={() => handleExtend(m)}
+                      title={`Thêm ${m} phút vào giờ kết thúc`}
+                    >
+                      +{m}p
+                    </button>
+                  ))}
+                </div>
+              )}
               {papers.length > 0 && (
-                <button type="button" className="btn btn-secondary btn-sm" onClick={() => setPapersModalOpen(true)}>
+                <button type="button" className="btn btn-secondary btn-sm ew-icon-btn" onClick={() => setPapersModalOpen(true)}>
-                  📄 Xem đề
+                  <IconExam size={13} />
+                  Xem đề
                 </button>
               )}
             </div>
           </div>
 
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+          <div className="ew-online-stat">
-            <div style={{ fontSize: '0.72rem', color: 'var(--text-muted)', fontWeight: 600, textTransform: 'uppercase' }}>
+            <span className="ew-meta-label">Online / Sĩ số</span>
-              Online / Sĩ số
+            <div className="workspace-stat-value ew-online-value">
-            </div>
+              <IconUsers size={13} />
-            <div className="workspace-stat-value">
               <span style={{ color: 'var(--success)' }}>{onlineCount}</span>
-              <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem', fontWeight: 500 }}> / {students.length} SV</span>
+              <span className="ew-online-total">/ {students.length} SV</span>
             </div>
           </div>
         </div>
@@ -694,8 +837,13 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
 
         <aside className={`workspace-config-drawer ${configOpen ? 'open' : ''}`}>
           <div className="workspace-drawer-header">
-            <strong>Cấu hình phòng thi</strong>
+            <span className="ew-drawer-title">
-            <button type="button" className="btn btn-secondary workspace-drawer-close" onClick={() => setConfigOpen(false)} aria-label="Đóng">×</button>
+              <IconSettings size={16} />
+              Cấu hình phòng thi
+            </span>
+            <button type="button" className="ew-drawer-close" onClick={() => setConfigOpen(false)} aria-label="Đóng">
+              <IconClose size={16} />
+            </button>
           </div>
           <div className="workspace-drawer-tabs">
             <button type="button" className={`workspace-drawer-tab ${configTab === 'info' ? 'active' : ''}`} onClick={() => setConfigTab('info')}>
@@ -713,7 +861,11 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
               <div className="config-card config-card-flat">
                 <div className="card-header-title">Thông tin phòng thi</div>
                 <p className="config-card-desc">
-                  {editable ? 'Chỉnh sửa được khi phòng ở trạng thái tạm thời.' : 'Phòng đã khóa chỉnh sửa.'}
+                  {editable
+                    ? 'Chỉnh sửa được khi phòng ở trạng thái tạm thời.'
+                    : canExtend
+                      ? 'Phòng đang thi — có thể gia hạn giờ kết thúc bên dưới hoặc dùng nút +15p / +30p / +60p trên thanh trạng thái.'
+                      : 'Phòng đã khóa chỉnh sửa.'}
                 </p>
                 <label className="login-field">
                   <span>Tên phòng thi</span>
@@ -754,13 +906,39 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                 </label>
                 <label className="login-field">
                   <span>Kết thúc</span>
-                  <input type="datetime-local" value={end} onChange={(e) => setEnd(e.target.value)} disabled={!editable} />
+                  <input
+                    type="datetime-local"
+                    value={end}
+                    onChange={(e) => setEnd(e.target.value)}
+                    disabled={!editable && !canExtend}
+                  />
                 </label>
-                {editable && (
+                {(editable || canExtend) && (
-                  <button type="button" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} disabled={saving} onClick={saveRoom}>
+                  <button
-                    {saving ? 'Đang lưu...' : 'Lưu thông tin'}
+                    type="button"
+                    className="btn btn-primary"
+                    style={{ width: '100%', justifyContent: 'center' }}
+                    disabled={saving}
+                    onClick={editable ? saveRoom : saveExtendedEndTime}
+                  >
+                    {saving ? 'Đang lưu...' : canExtend && !editable ? 'Lưu giờ kết thúc (gia hạn)' : 'Lưu thông tin'}
                   </button>
                 )}
+                {canExtend && (
+                  <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.75rem' }}>
+                    {[15, 30, 60].map((m) => (
+                      <button
+                        key={m}
+                        type="button"
+                        className="btn btn-secondary btn-sm"
+                        disabled={extending}
+                        onClick={() => handleExtend(m)}
+                      >
+                        +{m} phút
+                      </button>
+                    ))}
+                  </div>
+                )}
               </div>
             )}
 
@@ -950,87 +1128,103 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
           </div>
         </aside>
 
-        <div className="right-panel workspace-content-panel">
+        <div className={`right-panel workspace-content-panel${activeSubTab === 'grid' ? ' workspace-content-panel--grid' : ''}`}>
-          <div className="workspace-panel-toolbar">
+          <div className="workspace-panel-toolbar ew-toolbar">
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
+            <div className="ew-toolbar-left">
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.65rem', flexWrap: 'wrap' }}>
               <button
                 type="button"
-                  className={`btn btn-secondary workspace-config-toggle ${configOpen ? 'active' : ''}`}
+                className={`btn btn-secondary workspace-config-toggle ew-config-toggle ${configOpen ? 'active' : ''}`}
                 onClick={() => setConfigOpen((v) => !v)}
               >
+                <IconSettings size={14} />
                 {configOpen ? 'Ẩn cấu hình' : 'Cấu hình phòng thi'}
               </button>
-                <div className="tab-btn-group">
+              <div className="ew-seg" role="tablist">
                 <button
                   type="button"
-                    className={`tab-sub-btn ${activeSubTab === 'roster' ? 'active' : ''}`}
+                  role="tab"
+                  aria-selected={activeSubTab === 'roster'}
+                  className={`ew-seg-btn ${activeSubTab === 'roster' ? 'ew-seg-btn--active' : ''}`}
                   onClick={() => setActiveSubTab('roster')}
                 >
-                    Sơ đồ sinh viên
+                  <IconMap size={14} />
+                  Sơ đồ
                 </button>
                 <button
                   type="button"
-                    className={`tab-sub-btn ${activeSubTab === 'grid' ? 'active' : ''}`}
+                  role="tab"
+                  aria-selected={activeSubTab === 'grid'}
+                  className={`ew-seg-btn ${activeSubTab === 'grid' ? 'ew-seg-btn--active' : ''}`}
                   onClick={() => setActiveSubTab('grid')}
                 >
-                    Giám sát camera 🖥️
+                  <IconMonitor size={14} />
+                  Giám sát
                 </button>
                 <button
                   type="button"
-                    className={`tab-sub-btn ${activeSubTab === 'detail' ? 'active' : ''}`}
+                  role="tab"
+                  aria-selected={activeSubTab === 'detail'}
+                  className={`ew-seg-btn ${activeSubTab === 'detail' ? 'ew-seg-btn--active' : ''}`}
                   onClick={() => setActiveSubTab('detail')}
                 >
+                  <IconList size={14} />
                   Chi tiết thi
                 </button>
                 <button
                   type="button"
-                    className={`tab-sub-btn ${activeSubTab === 'submissions' ? 'active' : ''}`}
+                  role="tab"
+                  aria-selected={activeSubTab === 'submissions'}
+                  className={`ew-seg-btn ${activeSubTab === 'submissions' ? 'ew-seg-btn--active' : ''}`}
                   onClick={() => setActiveSubTab('submissions')}
                 >
+                  <IconPackage size={14} />
                   Bài nộp ({submissions.length})
                 </button>
                 <button
                   type="button"
-                    className={`tab-sub-btn ${activeSubTab === 'violations' ? 'active' : ''}`}
+                  role="tab"
+                  aria-selected={activeSubTab === 'violations'}
+                  className={`ew-seg-btn ${activeSubTab === 'violations' ? 'ew-seg-btn--active' : ''}`}
                   onClick={() => setActiveSubTab('violations')}
                 >
+                  <IconShield size={14} />
                   Vi phạm
                 </button>
               </div>
             </div>
 
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+            <div className="ew-toolbar-right">
               {activeSubTab !== 'submissions' && activeSubTab !== 'grid' && activeSubTab !== 'violations' && (
-                  <div className="search-input-wrapper">
+                <div className="ew-search-wrapper">
+                  <span className="ew-search-icon"><IconSearch size={14} /></span>
                   <input
-                      type="text"
+                    type="search"
-                      className="search-input"
+                    className="search-input ew-search-input"
                     placeholder="Tìm sinh viên..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
                   />
-                    <span className="search-icon">🔍</span>
                 </div>
               )}
               {prepEditable && (
                 <button
                   type="button"
-                    className="btn btn-primary btn-sm"
+                  className="btn btn-primary btn-sm ew-icon-btn"
                   onClick={() => { setStudentPickerOpen(true); setSearchQ(''); setSearchHits([]); setSelectedPickerRkIds([]); }}
                 >
-                    + Thêm sinh viên
+                  <IconPlus size={14} />
+                  Thêm sinh viên
                 </button>
               )}
               {papers.length > 0 && (
-                  <button type="button" className="btn btn-secondary btn-sm" onClick={() => setPapersModalOpen(true)}>
+                <button type="button" className="btn btn-secondary btn-sm ew-icon-btn" onClick={() => setPapersModalOpen(true)}>
-                    📄 Xem đề ({papers.length})
+                  <IconExam size={13} />
+                  Xem đề ({papers.length})
                 </button>
               )}
             </div>
           </div>
-            <div className="divider" style={{ opacity: 0.3, margin: '0.25rem 0' }} />
+          <div className="ew-toolbar-divider" />
-          </div>
 
           <div className="workspace-panel-body workspace-panel-fill">
             {activeSubTab === 'roster' ? (
@@ -1059,8 +1253,8 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
               <div className="session-logs-panel">
                 <div className="attendance-table-scroll table-wrapper" style={{ border: 'none' }}>
                   {students.length === 0 ? (
-                    <div className="empty-state" style={{ minHeight: '300px' }}>
+                    <div className="empty-state ew-empty" style={{ minHeight: '300px' }}>
-                      <div className="empty-state-icon">📋</div>
+                      <div className="ew-empty-icon"><IconInbox size={36} /></div>
                       <h2>Chưa có sinh viên</h2>
                       <p>Thêm sinh viên để xem chi tiết đề gán và trạng thái nộp bài.</p>
                     </div>
@@ -1112,14 +1306,22 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                                 <button type="button" className="btn btn-secondary btn-sm" style={{ marginLeft: '0.35rem' }} onClick={() => openStudentChat(s)}>
                                   Nhắn tin
                                 </button>
-                                {prepEditable && (
+                                {canRemoveStudents && (
                                   <button
                                     type="button"
                                     className="btn btn-secondary btn-sm learning-btn-danger"
                                     style={{ marginLeft: '0.35rem' }}
-                                    onClick={() => apiExam.removeStudent(examId, s.studentRkId).then(load)}
+                                    onClick={async () => {
+                                      if (!window.confirm(`Xóa sinh viên "${s.fullName}" khỏi phòng thi?`)) return;
+                                      try {
+                                        await apiExam.removeStudent(examId, s.studentRkId);
+                                        await load();
+                                      } catch (e: any) {
+                                        alert(e?.message || 'Xóa sinh viên thất bại');
+                                      }
+                                    }}
                                   >
-                                    Xóa
+                                    Xóa khỏi phòng
                                   </button>
                                 )}
                               </td>
@@ -1140,10 +1342,11 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                     {papers.length > 0 && (
                       <button
                         type="button"
-                        className="btn btn-secondary btn-sm"
+                        className="btn btn-secondary btn-sm ew-icon-btn"
                         onClick={() => setPapersModalOpen(true)}
                       >
-                        📄 Xem đề phòng thi
+                        <IconExam size={13} />
+                        Xem đề phòng thi
                       </button>
                     )}
                     <button
@@ -1152,7 +1355,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                       disabled={bundlingSubs}
                       onClick={downloadAllSubs}
                     >
-                      {bundlingSubs ? 'Đang gói ZIP...' : '📦 Tải tất cả (ZIP gộp)'}
+                      {bundlingSubs ? 'Đang gói ZIP...' : 'Tải tất cả (ZIP gộp)'}
                     </button>
                     <button
                       type="button"
@@ -1187,8 +1390,8 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                 )}
                 <div className="attendance-table-scroll table-wrapper" style={{ border: 'none' }}>
                   {submissions.length === 0 ? (
-                    <div className="empty-state" style={{ minHeight: '300px' }}>
+                    <div className="empty-state ew-empty" style={{ minHeight: '300px' }}>
-                      <div className="empty-state-icon">📦</div>
+                      <div className="ew-empty-icon"><IconPackage size={36} /></div>
                       <h2>Chưa có bài nộp</h2>
                       <p>Sinh viên nộp bài qua app Simple Care sẽ hiện tại đây.</p>
                     </div>
@@ -1312,6 +1515,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
           student={selectedStudent}
           isOnline={onlineIds.includes(selectedStudent.rkId)}
           onClose={() => setSelectedStudent(null)}
+          initialShowProctor={activeSubTab === 'grid' || activeSubTab === 'roster'}
         />
       )}
 
@@ -1422,17 +1626,17 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
               <div className="exam-student-hits">
                 {searchMode === 'single' && searchQ.trim() === '' ? (
                   <div className="exam-student-hits-empty">
-                    <span>🔍</span>
+                    <span className="ew-empty-icon"><IconSearch size={28} /></span>
                     <p>Gõ ít nhất vài ký tự để tìm sinh viên.</p>
                   </div>
                 ) : searchMode === 'bulk' && searchHits.length === 0 ? (
                   <div className="exam-student-hits-empty">
-                    <span>📋</span>
+                    <span className="ew-empty-icon"><IconList size={28} /></span>
                     <p>Paste danh sách và bấm "Tìm hàng loạt" để hiển thị kết quả.</p>
                   </div>
                 ) : searchHits.length === 0 ? (
                   <div className="exam-student-hits-empty">
-                    <span>📭</span>
+                    <span className="ew-empty-icon"><IconInbox size={28} /></span>
                     <p>Không tìm thấy sinh viên phù hợp.</p>
                   </div>
                 ) : (
@@ -1534,6 +1738,103 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
         onSelect={applyTemplate}
         allowedApps={allowedApps}
       />
+
+      <style>{`
+        .ew-header { padding: 0.7rem 1.1rem; gap: 0.65rem; }
+        .ew-header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
+        .ew-brand-icon {
+          width: 40px; height: 40px; border-radius: var(--radius-sm);
+          background: var(--accent-light); color: var(--accent);
+          display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+        }
+        .ew-title-block { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
+        .ew-header .workspace-class-title { font-size: 1.2rem; font-weight: 700; margin: 0; line-height: 1.25; }
+        .ew-header .class-badge-container { margin-top: 0.15rem; gap: 0.35rem; }
+        .ew-header-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+        .ew-status-panel { gap: 0.75rem; padding: 0.4rem 0.85rem; }
+        .ew-status-label-group { display: flex; flex-direction: column; }
+        .ew-meta-label {
+          font-size: 0.68rem; color: var(--text-muted); font-weight: 600;
+          text-transform: uppercase; letter-spacing: 0.04em;
+        }
+        .ew-status-value { font-size: 0.88rem; font-weight: 700; }
+        .ew-status-actions { display: flex; flex-direction: column; gap: 0.3rem; }
+        .ew-extend-row { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
+        .ew-online-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
+        .ew-online-value {
+          display: flex; align-items: center; gap: 0.3rem; font-size: 1.1rem !important;
+        }
+        .ew-online-total { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
+
+        .ew-drawer-title {
+          display: inline-flex; align-items: center; gap: 0.45rem;
+          font-weight: 700; font-size: 0.92rem; color: var(--text-primary);
+        }
+        .ew-drawer-close {
+          display: flex; align-items: center; justify-content: center;
+          width: 28px; height: 28px; border: none; background: var(--bg-subtle);
+          border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer;
+        }
+        .ew-drawer-close:hover { background: var(--border-color); color: var(--text-primary); }
+
+        .workspace-content-panel.right-panel {
+          padding: 0.65rem 0.85rem 0.85rem; gap: 0;
+        }
+        .workspace-content-panel--grid { padding-top: 0.55rem; }
+        .ew-toolbar {
+          display: flex; justify-content: space-between; align-items: center;
+          flex-wrap: wrap; gap: 0.55rem 0.75rem; flex-shrink: 0;
+        }
+        .ew-toolbar-left, .ew-toolbar-right {
+          display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
+        }
+        .ew-config-toggle {
+          display: inline-flex !important; align-items: center; gap: 0.35rem;
+          padding: 0.38rem 0.85rem !important; font-size: 0.8rem !important; font-weight: 600 !important;
+        }
+        .ew-toolbar-divider {
+          margin: 0.5rem 0 0.35rem; border-top: 1px solid var(--border-light);
+          opacity: 0.45; flex-shrink: 0;
+        }
+        .workspace-content-panel--grid .ew-toolbar-divider { margin: 0.4rem 0 0; opacity: 0.35; }
+
+        .ew-seg {
+          display: flex; background: var(--bg-subtle); border: 1px solid var(--border-color);
+          border-radius: var(--radius-sm); padding: 0.18rem; gap: 0.15rem; flex-wrap: wrap;
+        }
+        .ew-seg-btn {
+          display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem;
+          font-size: 0.78rem; font-weight: 600; background: transparent; color: var(--text-secondary);
+          border: none; border-radius: 4px; cursor: pointer; white-space: nowrap;
+          font-family: var(--font-sans); transition: background 0.14s, color 0.14s;
+        }
+        .ew-seg-btn:hover:not(.ew-seg-btn--active) {
+          background: var(--border-light); color: var(--text-primary);
+        }
+        .ew-seg-btn--active {
+          background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+        }
+
+        .ew-search-wrapper { position: relative; max-width: 220px; width: 100%; }
+        .ew-search-icon {
+          position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
+          color: var(--text-muted); display: flex; pointer-events: none;
+        }
+        .ew-search-input { padding: 0.38rem 0.8rem 0.38rem 2rem !important; font-size: 0.82rem !important; width: 100%; }
+        .ew-icon-btn {
+          display: inline-flex !important; align-items: center; gap: 0.3rem;
+        }
+
+        .ew-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; }
+        .ew-empty-icon { display: flex; color: var(--text-muted); opacity: 0.55; }
+        .exam-student-hits-empty .ew-empty-icon { margin-bottom: 0.25rem; }
+
+        @media (max-width: 960px) {
+          .ew-header { padding: 0.65rem 0.85rem; }
+          .ew-header .workspace-class-title { font-size: 1.05rem; }
+          .ew-seg-btn { padding: 0.28rem 0.5rem; font-size: 0.74rem; }
+        }
+      `}</style>
     </div>
   );
 };

management/src/components/ExamsTab.tsx

@@ -11,13 +11,13 @@ function fmtTime(iso: string) {
   }
 }
 
-function statusLabel(st: string) {
+function statusMeta(st: string) {
-  if (st === 'draft') return { text: 'Tạm thời', cls: 'badge-muted' };
+  if (st === 'draft') return { text: 'Tạm thời', tone: 'muted' };
-  if (st === 'ready') return { text: 'Sẵn sàng', cls: 'badge-info' };
+  if (st === 'ready') return { text: 'Sẵn sàng', tone: 'info' };
-  if (st === 'active') return { text: 'Đang thi', cls: 'badge-success' };
+  if (st === 'active') return { text: 'Đang thi', tone: 'active' };
-  if (st === 'cancelled') return { text: 'Đã hủy', cls: 'badge-warning' };
+  if (st === 'cancelled') return { text: 'Đã hủy', tone: 'warn' };
-  if (st === 'ended') return { text: 'Đã kết thúc', cls: 'badge-muted' };
+  if (st === 'ended') return { text: 'Đã kết thúc', tone: 'muted' };
-  return { text: st, cls: 'badge-muted' };
+  return { text: st, tone: 'muted' };
 }
 
 function toLocalInput(iso?: string) {
@@ -32,9 +32,70 @@ function localInputToISO(v: string) {
   return new Date(v).toISOString();
 }
 
+type RoomScope = 'mine' | 'all';
+type IconProps = { size?: number; filled?: boolean };
+
+const IconClipboard = ({ size = 22 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+    <rect x="9" y="3" width="6" height="4" rx="1" />
+    <path d="M9 12h6M9 16h4" />
+  </svg>
+);
+
+const IconPlus = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+const IconStar = ({ size = 14, filled }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m12 3.5 2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.8l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8L12 3.5z" />
+  </svg>
+);
+
+const IconSearch = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="11" cy="11" r="7" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const IconCalendar = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="3" y="5" width="18" height="16" rx="2" />
+    <path d="M16 3v4M8 3v4M3 11h18" />
+  </svg>
+);
+
+const IconUsers = ({ size = 12 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="3.5" />
+    <path d="M22 21v-2a3.5 3.5 0 0 0-2.5-3.35" />
+    <path d="M16 3.5a3.5 3.5 0 0 1 0 7" />
+  </svg>
+);
+
+const IconOpen = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M5 12h14" />
+    <path d="m13 6 6 6-6 6" />
+  </svg>
+);
+
+const IconInbox = ({ size = 36 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
 export const ExamsTab: React.FC = () => {
   const { staff } = useAuth();
   const isSuperAdmin = staff?.email === 'phuocntb@rikkeiacademy.com';
+  const myStaffId = staff?.id ?? 0;
 
   const [rooms, setRooms] = useState<ExamRoomItem[]>([]);
   const [loading, setLoading] = useState(true);
@@ -44,6 +105,7 @@ export const ExamsTab: React.FC = () => {
   const [end, setEnd] = useState('');
   const [busy, setBusy] = useState(false);
   const [search, setSearch] = useState('');
+  const [roomScope, setRoomScope] = useState<RoomScope>('mine');
 
   const load = async () => {
     setLoading(true);
@@ -61,20 +123,28 @@ export const ExamsTab: React.FC = () => {
     load();
   }, []);
 
+  const scopedRooms = useMemo(() => {
+    if (roomScope === 'all' || !myStaffId) return rooms;
+    return rooms.filter((r) => Number(r.createdByStaffId) === myStaffId);
+  }, [rooms, roomScope, myStaffId]);
+
   const stats = useMemo(() => {
-    const active = rooms.filter((r) => (r.displayStatus || r.status) === 'active').length;
+    const active = scopedRooms.filter((r) => (r.displayStatus || r.status) === 'active').length;
-    const upcoming = rooms.filter((r) => {
+    const upcoming = scopedRooms.filter((r) => {
       const st = r.displayStatus || r.status;
       return st === 'ready' || st === 'draft';
     }).length;
-    return { total: rooms.length, active, upcoming };
+    return { total: scopedRooms.length, active, upcoming };
-  }, [rooms]);
+  }, [scopedRooms]);
 
   const filtered = useMemo(() => {
     const q = search.trim().toLowerCase();
-    if (!q) return rooms;
+    if (!q) return scopedRooms;
-    return rooms.filter((r) => r.name.toLowerCase().includes(q));
+    return scopedRooms.filter((r) => r.name.toLowerCase().includes(q));
-  }, [rooms, search]);
+  }, [scopedRooms, search]);
+
+  const canDeleteRoom = (r: ExamRoomItem) =>
+    isSuperAdmin || (myStaffId > 0 && Number(r.createdByStaffId) === myStaffId);
 
   const create = async () => {
     if (!name.trim() || !start || !end) return;
@@ -99,7 +169,11 @@ export const ExamsTab: React.FC = () => {
   };
 
   const handleDeleteRoom = async (roomId: number, roomName: string) => {
-    if (window.confirm(`Bạn có chắc chắn muốn xóa hoàn toàn phòng thi "${roomName}" không? Hành động này sẽ xóa sạch dữ liệu phòng thi, các bài nộp, và không thể khôi phục.`)) {
+    if (
+      window.confirm(
+        `Bạn có chắc chắn muốn xóa hoàn toàn phòng thi "${roomName}" không? Hành động này sẽ xóa sạch dữ liệu phòng thi, các bài nộp, và không thể khôi phục.`
+      )
+    ) {
       try {
         await apiExam.remove(roomId);
         alert('Đã xóa phòng thi thành công!');
@@ -112,20 +186,37 @@ export const ExamsTab: React.FC = () => {
 
   return (
     <div className="tab-page exams-page">
-      <header className="page-header page-header--row">
+      <div className="tab-page-toolbar">
-        <div>
+        <div className="page-header">
-          <h1 className="page-title">Danh sách phòng thi</h1>
+          <div className="page-title">
-          <p className="page-desc">Tạo phòng, chia đề ngẫu nhiên, gửi đề và thu bài từ sinh viên.</p>
+            <h1 className="page-title-heading">
+              <span className="page-title-icon" aria-hidden>
+                <IconClipboard />
+              </span>
+              Danh sách phòng thi
+            </h1>
+            <p>
+              {roomScope === 'mine'
+                ? 'Mặc định chỉ hiện phòng thi do bạn tạo — chuyển sang xem tất cả khi cần'
+                : 'Đang xem toàn bộ phòng thi trong hệ thống'}
+            </p>
           </div>
+          <div className="exams-header-actions">
             <button type="button" className="btn btn-primary" onClick={() => setShowCreate(true)}>
-          + Tạo phòng thi
+              <IconPlus />
+              Tạo phòng thi
             </button>
-      </header>
+          </div>
+        </div>
+      </div>
 
+      <div className="tab-page-body" style={{ gap: '0.85rem' }}>
         <div className="exams-stats-row">
           <div className="learning-stat">
             <span className="learning-stat-value">{stats.total}</span>
-          <span className="learning-stat-label">Tổng phòng</span>
+            <span className="learning-stat-label">
+              {roomScope === 'mine' ? 'Phòng của tôi' : 'Tổng phòng'}
+            </span>
           </div>
           <div className="learning-stat learning-stat--accent">
             <span className="learning-stat-value">{stats.active}</span>
@@ -137,51 +228,174 @@ export const ExamsTab: React.FC = () => {
           </div>
         </div>
 
-      <div className="exams-toolbar">
+        <div className="content-card learning-toolbar-card exams-toolbar-card">
+          <div className="learning-toolbar exams-toolbar-inner">
+            <div className="learning-seg" role="group" aria-label="Phạm vi phòng thi">
+              <button
+                type="button"
+                className={`learning-seg-btn${roomScope === 'mine' ? ' learning-seg-btn--active' : ''}`}
+                onClick={() => setRoomScope('mine')}
+              >
+                <IconStar size={13} filled={roomScope === 'mine'} />
+                <span>Phòng của tôi</span>
+              </button>
+              <button
+                type="button"
+                className={`learning-seg-btn${roomScope === 'all' ? ' learning-seg-btn--active' : ''}`}
+                onClick={() => setRoomScope('all')}
+              >
+                <span>Xem tất cả</span>
+              </button>
+            </div>
             <input
               type="search"
-          className="app-pool-search exams-search"
+              className="app-pool-search learning-search exams-search"
               placeholder="Tìm theo tên phòng thi..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
             />
           </div>
+        </div>
+
+        <div className="tab-page-scroll">
+          <div className="content-card" style={{ padding: 0 }}>
+            {loading ? (
+              <div className="exams-empty-panel">
+                <div className="sync-spinner" style={{ width: 36, height: 36, borderWidth: 3 }} />
+                <p>Đang tải danh sách phòng thi...</p>
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="exams-empty-panel">
+                <div className="exams-empty-icon">
+                  {search.trim() ? <IconSearch size={32} /> : <IconInbox />}
+                </div>
+                <p>
+                  {search.trim()
+                    ? 'Không tìm thấy phòng thi phù hợp.'
+                    : roomScope === 'mine'
+                      ? 'Bạn chưa tạo phòng thi nào.'
+                      : 'Chưa có phòng thi — bấm Tạo phòng thi để bắt đầu.'}
+                </p>
+                {!search.trim() && (
+                  <div className="exams-empty-actions">
+                    <button type="button" className="btn btn-primary" onClick={() => setShowCreate(true)}>
+                      <IconPlus />
+                      Tạo phòng thi
+                    </button>
+                    {roomScope === 'mine' && (
+                      <button type="button" className="btn btn-secondary" onClick={() => setRoomScope('all')}>
+                        Xem tất cả
+                      </button>
+                    )}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="exams-card-grid">
+                {filtered.map((r) => {
+                  const st = statusMeta(r.displayStatus || r.status);
+                  const mine = myStaffId > 0 && Number(r.createdByStaffId) === myStaffId;
+                  const isActive = (r.displayStatus || r.status) === 'active';
+                  return (
+                    <article
+                      key={r.id}
+                      className={`exam-list-card${isActive ? ' exam-list-card--active' : ''}`}
+                    >
+                      <header className="exam-list-card-head">
+                        <div className="exam-list-card-info">
+                          <h3 className="exam-list-card-title" title={r.name}>{r.name}</h3>
+                          <div className="exam-list-card-meta-block">
+                            <div className="exam-meta-row">
+                              <IconCalendar />
+                              <span>{fmtTime(r.startTime)}</span>
+                              <span className="exam-list-card-sep">→</span>
+                              <span>{fmtTime(r.endTime)}</span>
+                            </div>
+                            <div className="exam-meta-row exam-meta-row--secondary">
+                              <IconUsers />
+                              <span>
+                                {r.studentCount} SV · {r.paperCount} đề
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="exam-list-card-badges">
+                          {mine && <span className="exam-tag exam-tag--mine">Của tôi</span>}
+                          <span className={`exam-tag exam-tag--${st.tone}`}>{st.text}</span>
+                        </div>
+                      </header>
+
+                      <footer className="exam-list-card-actions">
+                        <button
+                          type="button"
+                          className="btn btn-primary btn-sm"
+                          onClick={() => openExam(r.id, r.name)}
+                        >
+                          Mở phòng thi
+                          <IconOpen />
+                        </button>
+                        {canDeleteRoom(r) && (
+                          <button
+                            type="button"
+                            className="btn btn-secondary btn-sm exam-btn-danger"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleDeleteRoom(r.id, r.name);
+                            }}
+                          >
+                            Xóa
+                          </button>
+                        )}
+                      </footer>
+                    </article>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
 
       {showCreate && (
         <div className="modal-overlay" onClick={() => setShowCreate(false)}>
-          <div className="modal-container" style={{ maxWidth: '500px' }} onClick={e => e.stopPropagation()}>
+          <div className="modal-container class-picker-modal exam-create-modal" onClick={(e) => e.stopPropagation()}>
-            <div className="modal-header">
+            <div className="modal-header class-picker-header">
+              <div>
                 <h2 className="modal-title">Tạo phòng thi mới</h2>
-              <button className="modal-close-btn" onClick={() => setShowCreate(false)} aria-label="Đóng">&times;</button>
+                <p className="class-picker-subtitle">
+                  Đặt tên và khung giờ thi. Sau khi tạo sẽ mở workspace để cấu hình đề và sinh viên.
+                </p>
               </div>
-            <div className="modal-body" style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+              <button className="modal-close-btn" onClick={() => setShowCreate(false)} aria-label="Đóng">
-              <label className="login-field" style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+                &times;
-                <span style={{ fontWeight: 600, fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Tên phòng thi</span>
+              </button>
+            </div>
+            <div className="modal-body class-picker-body exam-create-body">
+              <label className="exam-field">
+                <span className="exam-field-label">Tên phòng thi</span>
                 <input
                   className="search-input"
-                  style={{ width: '100%', boxSizing: 'border-box' }}
                   value={name}
                   onChange={(e) => setName(e.target.value)}
                   placeholder="VD: Thi cuối kỳ Java"
+                  autoFocus
                 />
               </label>
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+              <div className="exam-field-grid">
-                <label className="login-field" style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+                <label className="exam-field">
-                  <span style={{ fontWeight: 600, fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Bắt đầu</span>
+                  <span className="exam-field-label">Bắt đầu</span>
                   <input
                     type="datetime-local"
-                    className="search-input"
+                    className="search-input exam-datetime"
-                    style={{ width: '100%', boxSizing: 'border-box', padding: '0.5rem 0.75rem' }}
                     value={start}
                     onChange={(e) => setStart(e.target.value)}
                   />
                 </label>
-                <label className="login-field" style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+                <label className="exam-field">
-                  <span style={{ fontWeight: 600, fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Kết thúc</span>
+                  <span className="exam-field-label">Kết thúc</span>
                   <input
                     type="datetime-local"
-                    className="search-input"
+                    className="search-input exam-datetime"
-                    style={{ width: '100%', boxSizing: 'border-box', padding: '0.5rem 0.75rem' }}
                     value={end}
                     onChange={(e) => setEnd(e.target.value)}
                   />
@@ -192,7 +406,12 @@ export const ExamsTab: React.FC = () => {
               <button type="button" className="btn btn-secondary" onClick={() => setShowCreate(false)}>
                 Hủy
               </button>
-              <button type="button" className="btn btn-primary" disabled={busy} onClick={create}>
+              <button
+                type="button"
+                className="btn btn-primary"
+                disabled={busy || !name.trim() || !start || !end}
+                onClick={create}
+              >
                 {busy ? 'Đang tạo...' : 'Tạo & mở phòng'}
               </button>
             </div>
@@ -200,73 +419,327 @@ export const ExamsTab: React.FC = () => {
         </div>
       )}
 
-      {loading ? (
+      <style>{`
-        <div className="system-empty">Đang tải...</div>
+        .page-title-heading {
-      ) : filtered.length === 0 ? (
+          display: flex;
-        <div className="system-empty">
+          align-items: center;
-          {search.trim() ? 'Không tìm thấy phòng thi phù hợp.' : 'Chưa có phòng thi — bấm Tạo phòng thi để bắt đầu.'}
+          gap: 0.55rem;
-        </div>
+        }
-      ) : (
+        .page-title-icon {
-        <div className="exams-card-grid">
+          display: inline-flex;
-          {filtered.map((r) => {
+          align-items: center;
-            const st = statusLabel(r.displayStatus || r.status);
+          justify-content: center;
-            return (
+          color: var(--accent);
-              <article key={r.id} className="exam-list-card">
+          flex-shrink: 0;
-                <div className="exam-list-card-head">
+        }
-                  <h3>{r.name}</h3>
+
-                  <span className={`badge ${st.cls}`}>{st.text}</span>
+        .exams-header-actions {
-                </div>
+          display: flex;
-                <div className="exam-list-card-meta">
+          gap: 0.5rem;
-                  <div>
+          flex-wrap: wrap;
-                    <span className="exam-list-card-label">Thời gian</span>
+          justify-content: flex-end;
-                    <span>{fmtTime(r.startTime)}</span>
+        }
-                    <span className="exam-list-card-sep">→</span>
+        .exams-header-actions .btn {
-                    <span>{fmtTime(r.endTime)}</span>
+          display: inline-flex;
-                  </div>
+          align-items: center;
-                  <div>
+          gap: 0.4rem;
-                    <span className="exam-list-card-label">Quy mô</span>
+        }
-                    <span>{r.studentCount} sinh viên · {r.paperCount} đề</span>
+
-                  </div>
+        .exams-toolbar-card {
-                </div>
+          margin-bottom: 0 !important;
-                <div style={{ display: 'flex', gap: '8px', marginTop: '1.25rem' }}>
+        }
-                  <button type="button" className="btn btn-primary btn-sm exam-list-card-open" onClick={() => openExam(r.id, r.name)} style={{ flex: 1, margin: 0 }}>
+        .exams-toolbar-inner {
-                    Mở phòng thi
+          margin: 0;
-                  </button>
+        }
-                  {isSuperAdmin && (
+        .exams-search {
-                    <button
+          max-width: none !important;
-                      type="button"
+        }
-                      className="btn btn-secondary btn-sm"
+
-                      onClick={(e) => {
+        .exams-empty-panel {
-                        e.stopPropagation();
+          display: flex;
-                        handleDeleteRoom(r.id, r.name);
+          flex-direction: column;
-                      }}
+          align-items: center;
-                      style={{
+          justify-content: center;
-                        borderColor: 'var(--danger)',
+          gap: 0.65rem;
-                        color: 'var(--danger)',
+          padding: 2.75rem 1.25rem;
-                        backgroundColor: 'transparent',
+          text-align: center;
-                        padding: '0.5rem 0.75rem',
+        }
-                        fontWeight: 600,
+        .exams-empty-panel p {
-                        transition: 'var(--transition)',
+          margin: 0;
-                        margin: 0
+          color: var(--text-secondary);
-                      }}
+          font-size: 0.9rem;
-                      onMouseEnter={(e) => {
+          font-weight: 500;
-                        e.currentTarget.style.backgroundColor = 'var(--danger)';
+          max-width: 36ch;
-                        e.currentTarget.style.color = '#fff';
+          line-height: 1.45;
-                      }}
+        }
-                      onMouseLeave={(e) => {
+        .exams-empty-icon {
-                        e.currentTarget.style.backgroundColor = 'transparent';
+          color: var(--text-muted);
-                        e.currentTarget.style.color = 'var(--danger)';
+          display: flex;
-                      }}
+        }
-                    >
+        .exams-empty-actions {
-                      Xóa
+          display: flex;
-                    </button>
+          gap: 0.5rem;
-                  )}
+          flex-wrap: wrap;
-                </div>
+          justify-content: center;
-              </article>
+          margin-top: 0.25rem;
-            );
+        }
-          })}
+        .exams-empty-actions .btn {
-        </div>
+          display: inline-flex;
-      )}
+          align-items: center;
+          gap: 0.35rem;
+        }
+
+        .exams-card-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+          gap: 0.75rem;
+          padding: 0.85rem;
+          padding-bottom: 4.75rem;
+        }
+
+        .exam-list-card {
+          background: #fff;
+          border: 1px solid var(--border-color);
+          border-radius: 10px;
+          padding: 0.85rem;
+          display: flex;
+          flex-direction: column;
+          gap: 0.55rem;
+          box-shadow: var(--shadow-sm);
+          transition: border-color 0.15s, box-shadow 0.15s;
+          min-height: 0;
+        }
+        .exam-list-card:hover {
+          border-color: #c5cdd8;
+          box-shadow: 0 3px 12px rgba(26, 35, 50, 0.08);
+        }
+        .exam-list-card--active {
+          border-left: 3px solid var(--accent);
+          background: rgba(187, 33, 38, 0.03);
+        }
+
+        .exam-list-card-head {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+          gap: 0.5rem;
+          flex: 1;
+        }
+        .exam-list-card-info {
+          min-width: 0;
+          flex: 1;
+        }
+        .exam-list-card-title {
+          margin: 0 0 0.4rem;
+          font-size: 0.88rem;
+          font-weight: 700;
+          color: var(--text-primary);
+          line-height: 1.35;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+        .exam-list-card-meta-block {
+          display: flex;
+          flex-direction: column;
+          gap: 0.2rem;
+        }
+        .exam-meta-row {
+          display: flex;
+          align-items: flex-start;
+          gap: 0.35rem;
+          font-size: 0.7rem;
+          color: var(--text-secondary);
+          line-height: 1.4;
+          flex-wrap: wrap;
+        }
+        .exam-meta-row svg {
+          flex-shrink: 0;
+          color: var(--text-muted);
+          margin-top: 0.1rem;
+        }
+        .exam-meta-row--secondary {
+          color: var(--text-muted);
+          font-size: 0.68rem;
+        }
+        .exam-list-card-sep {
+          color: var(--text-muted);
+          opacity: 0.7;
+        }
+
+        .exam-list-card-badges {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+          gap: 0.25rem;
+          flex-shrink: 0;
+        }
+        .exam-tag {
+          display: inline-flex;
+          align-items: center;
+          padding: 0.15rem 0.45rem;
+          border-radius: 999px;
+          font-size: 0.62rem;
+          font-weight: 700;
+          line-height: 1.2;
+          white-space: nowrap;
+          border: 1px solid transparent;
+        }
+        .exam-tag--mine {
+          background: rgba(234, 179, 8, 0.14);
+          color: #a16207;
+          border-color: rgba(234, 179, 8, 0.35);
+        }
+        .exam-tag--active {
+          background: rgba(13, 159, 110, 0.12);
+          color: #0b7a55;
+          border-color: rgba(13, 159, 110, 0.28);
+        }
+        .exam-tag--info {
+          background: rgba(37, 99, 235, 0.1);
+          color: #1d4ed8;
+          border-color: rgba(37, 99, 235, 0.22);
+        }
+        .exam-tag--warn {
+          background: rgba(245, 158, 11, 0.12);
+          color: #b45309;
+          border-color: rgba(245, 158, 11, 0.3);
+        }
+        .exam-tag--muted {
+          background: var(--bg-subtle);
+          color: var(--text-muted);
+          border-color: var(--border-color);
+        }
+
+        .exam-list-card-actions {
+          display: flex;
+          gap: 0.4rem;
+          margin-top: auto;
+          padding-top: 0.55rem;
+          border-top: 1px solid var(--border-light);
+        }
+        .exam-list-card-actions .btn {
+          flex: 1;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          height: 30px;
+          padding: 0.35rem 0.5rem;
+          font-size: 0.72rem;
+          border-radius: 7px;
+          line-height: 1;
+        }
+        .exam-btn-danger {
+          color: #b91c1c !important;
+          border-color: #fecaca !important;
+          background: #fef2f2 !important;
+          flex: 0 0 auto !important;
+          min-width: 52px;
+        }
+        .exam-btn-danger:hover {
+          background: #fee2e2 !important;
+          border-color: #fca5a5 !important;
+        }
+
+        .exam-create-modal {
+          max-width: 520px !important;
+        }
+        .exam-create-modal .class-picker-header {
+          align-items: flex-start !important;
+          padding: 1.1rem 1.35rem !important;
+        }
+        .exam-create-modal .class-picker-subtitle {
+          margin: 0.3rem 0 0;
+          color: var(--text-muted);
+          font-size: 0.78rem;
+          line-height: 1.4;
+          max-width: 42ch;
+        }
+        .exam-create-modal .class-picker-body {
+          padding: 1rem 1.35rem 1.15rem !important;
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+        }
+        .exam-create-body {
+          gap: 0.9rem !important;
+        }
+        .exam-field {
+          display: flex;
+          flex-direction: column;
+          gap: 0.35rem;
+        }
+        .exam-field-label {
+          font-weight: 600;
+          font-size: 0.75rem;
+          color: var(--text-secondary);
+        }
+        .exam-field .search-input {
+          width: 100%;
+          box-sizing: border-box;
+        }
+        .exam-field-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 0.75rem;
+        }
+        .exam-datetime {
+          padding: 0.5rem 0.75rem !important;
+        }
+
+        @media (max-width: 900px) {
+          .exams-header-actions {
+            width: 100%;
+          }
+          .exams-header-actions .btn {
+            flex: 1;
+            justify-content: center;
+          }
+          .page-header {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 0.75rem;
+          }
+          .learning-seg {
+            width: 100%;
+          }
+          .learning-seg-btn {
+            flex: 1;
+          }
+          .exams-stats-row {
+            grid-template-columns: repeat(3, 1fr) !important;
+            gap: 0.45rem;
+          }
+        }
+
+        @media (max-width: 768px) {
+          .exams-card-grid {
+            grid-template-columns: 1fr;
+            padding: 0.75rem;
+            gap: 0.65rem;
+          }
+          .exam-list-card-actions .btn {
+            height: 32px;
+            font-size: 0.75rem;
+          }
+        }
+
+        @media (max-width: 560px) {
+          .exams-stats-row {
+            grid-template-columns: 1fr !important;
+          }
+          .exam-field-grid {
+            grid-template-columns: 1fr;
+          }
+          .exam-list-card-actions {
+            flex-direction: column;
+          }
+          .exam-btn-danger {
+            width: 100%;
+          }
+        }
+      `}</style>
     </div>
   );
 };

management/src/components/ProctorStreamPanels.tsx

@@ -1,135 +1,75 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { getWsUrl } from '../api';
+import { StudentStreamImage } from './StudentStreamImage';
 
 interface ProctorStreamPanelsProps {
   studentId: number;
   layout?: 'default' | 'focus';
 }
 
+type IconProps = { size?: number };
+
+const IconMinus = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+
+const IconPlus = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+
+const IconMaximize = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+    <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+    <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+    <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+  </svg>
+);
+
+const IconMinimize = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M8 3v3a2 2 0 0 1-2 2H3" />
+    <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+    <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+    <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+  </svg>
+);
+
+const IconCamera = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+    <circle cx="12" cy="13" r="4" />
+  </svg>
+);
+
+const IconCameraOff = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <line x1="1" y1="1" x2="23" y2="23" />
+    <path d="M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v7" />
+    <path d="M9.4 9.4A4 4 0 0 0 12 17a4 4 0 0 0 3.6-5.6" />
+  </svg>
+);
+
 const ZOOM_STEPS = [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3];
 
 export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
   studentId,
   layout = 'focus',
 }) => {
-  const [screenFrame, setScreenFrame] = useState<string | null>(null);
-  const [webcamFrame, setWebcamFrame] = useState<string | null>(null);
-  const [streaming, setStreaming] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [showWebcam, setShowWebcam] = useState(true);
-  const [screenZoomIdx, setScreenZoomIdx] = useState(2); // 1x
+  const [screenZoomIdx, setScreenZoomIdx] = useState(2);
   const [webcamZoomIdx, setWebcamZoomIdx] = useState(2);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
-  const wsRef = useRef<WebSocket | null>(null);
-  const intentionalClose = useRef(false);
-  const hasOpened = useRef(false);
-  const hasFrames = useRef(false);
   const screenPanelRef = useRef<HTMLDivElement>(null);
 
   const screenZoom = ZOOM_STEPS[screenZoomIdx];
   const webcamZoom = ZOOM_STEPS[webcamZoomIdx];
 
-  useEffect(() => {
-    const wsUrl = getWsUrl('/ws?role=teacher');
-    let retryTimer: ReturnType<typeof setTimeout> | null = null;
-    let pingTimer: ReturnType<typeof setInterval> | null = null;
-    let attempt = 0;
-
-    intentionalClose.current = false;
-    hasOpened.current = false;
-    hasFrames.current = false;
-    setStreaming(false);
-    setErrorMessage(null);
-    setScreenFrame(null);
-    setWebcamFrame(null);
-
-    const markStreaming = () => {
-      if (!hasFrames.current) {
-        hasFrames.current = true;
-        setStreaming(true);
-        setErrorMessage(null);
-      }
-    };
-
-    const clearPing = () => {
-      if (pingTimer) {
-        clearInterval(pingTimer);
-        pingTimer = null;
-      }
-    };
-
-    const connect = () => {
-      if (intentionalClose.current) return;
-
-      const ws = new WebSocket(wsUrl);
-      wsRef.current = ws;
-
-      ws.onopen = () => {
-        attempt = 0;
-        hasOpened.current = true;
-        setStreaming(true);
-        setErrorMessage(null);
-        ws.send(JSON.stringify({ event: 'teacher:subscribe', data: { studentId } }));
-        clearPing();
-        pingTimer = setInterval(() => {
-          if (ws.readyState === WebSocket.OPEN) {
-            ws.send(JSON.stringify({ event: 'client:ping', data: {} }));
-          }
-        }, 15000);
-      };
-
-      ws.onmessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data);
-          if (msg.event === 'client:pong') return;
-          if (msg.event === 'teacher:screenshot-stream-frame' && msg.data.studentId === studentId) {
-            setScreenFrame(msg.data.imageBuffer);
-            markStreaming();
-          } else if (msg.event === 'teacher:webcam-stream-frame' && msg.data.studentId === studentId) {
-            setWebcamFrame(msg.data.imageBuffer);
-            markStreaming();
-          } else if (msg.event === 'teacher:stream-stopped' && msg.data.studentId === studentId) {
-            setScreenFrame(null);
-            setWebcamFrame(null);
-            setStreaming(false);
-            setErrorMessage('Sinh viên đã dừng stream');
-          }
-        } catch (err) {
-          console.error('Error parsing WS frame:', err);
-        }
-      };
-
-      ws.onerror = () => {};
-
-      ws.onclose = () => {
-        clearPing();
-        if (intentionalClose.current) return;
-        setStreaming(false);
-        if (!hasOpened.current && !hasFrames.current) {
-          setErrorMessage('Không thể kết nối máy chủ giám sát');
-        } else {
-          setErrorMessage('Mất kết nối giám sát — đang thử lại...');
-        }
-        const delay = Math.min(1000 * 2 ** Math.min(attempt++, 4), 10000);
-        retryTimer = setTimeout(connect, delay);
-      };
-    };
-
-    connect();
-
-    return () => {
-      intentionalClose.current = true;
-      clearPing();
-      if (retryTimer) clearTimeout(retryTimer);
-      if (wsRef.current?.readyState === WebSocket.OPEN) {
-        wsRef.current.send(JSON.stringify({ event: 'teacher:unsubscribe', data: { studentId } }));
-      }
-      wsRef.current?.close();
-      wsRef.current = null;
-    };
-  }, [studentId]);
-
   useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(document.fullscreenElement === screenPanelRef.current);
@@ -154,12 +94,12 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
 
   const zoomIn = (target: 'screen' | 'webcam') => {
     const setter = target === 'screen' ? setScreenZoomIdx : setWebcamZoomIdx;
-    setter(i => Math.min(i + 1, ZOOM_STEPS.length - 1));
+    setter((i) => Math.min(i + 1, ZOOM_STEPS.length - 1));
   };
 
   const zoomOut = (target: 'screen' | 'webcam') => {
     const setter = target === 'screen' ? setScreenZoomIdx : setWebcamZoomIdx;
-    setter(i => Math.max(i - 1, 0));
+    setter((i) => Math.max(i - 1, 0));
   };
 
   const zoomReset = (target: 'screen' | 'webcam') => {
@@ -169,12 +109,19 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
 
   const renderZoomToolbar = (target: 'screen' | 'webcam', zoom: number, onFs?: () => void) => (
     <div className="panel-toolbar">
-      <button type="button" className="proctor-tool-btn" title="Thu nhỏ" onClick={() => zoomOut(target)}>−</button>
+      <button type="button" className="proctor-tool-btn" title="Thu nhỏ" onClick={() => zoomOut(target)}>
+        <IconMinus size={14} />
+      </button>
       <span className="proctor-zoom-label">{Math.round(zoom * 100)}%</span>
-      <button type="button" className="proctor-tool-btn" title="Phóng to" onClick={() => zoomIn(target)}>+</button>
+      <button type="button" className="proctor-tool-btn" title="Phóng to" onClick={() => zoomIn(target)}>
-      <button type="button" className="proctor-tool-btn" title="Về 100%" onClick={() => zoomReset(target)}>1:1</button>
+        <IconPlus size={14} />
+      </button>
+      <button type="button" className="proctor-tool-btn proctor-tool-btn-label" title="Về 100%" onClick={() => zoomReset(target)}>
+        1:1
+      </button>
       {onFs && (
         <button type="button" className="proctor-tool-btn proctor-tool-btn-wide" title="Toàn màn hình" onClick={onFs}>
+          {isFullscreen ? <IconMinimize size={13} /> : <IconMaximize size={13} />}
           {isFullscreen ? 'Thu nhỏ' : 'Phóng to'}
         </button>
       )}
@@ -184,24 +131,22 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
   return (
     <div className="proctor-stream-wrap">
       <div className="proctor-stream-toolbar">
-        <span className={`status-pill ${streaming || screenFrame || webcamFrame ? 'connected' : 'connecting'}`}>
+        <span className="status-pill connected">
-          {streaming || screenFrame || webcamFrame ? '● Đang phát' : '○ Đang kết nối...'}
+          <span className="status-pill-dot" />
+          Đang phát (HTTP)
         </span>
         <div className="proctor-stream-actions">
           <button
             type="button"
             className={`btn btn-secondary proctor-action-btn ${showWebcam ? '' : 'active'}`}
-            onClick={() => setShowWebcam(v => !v)}
+            onClick={() => setShowWebcam((v) => !v)}
           >
+            {showWebcam ? <IconCameraOff size={13} /> : <IconCamera size={13} />}
             {showWebcam ? 'Ẩn webcam' : 'Hiện webcam'}
           </button>
         </div>
       </div>
 
-      {errorMessage && !screenFrame && !webcamFrame && (
-        <div className="alert-error proctor-stream-error">{errorMessage}</div>
-      )}
-
       <div className={`proctor-grid proctor-grid-${layout} ${!showWebcam ? 'proctor-grid--no-webcam' : ''}`}>
         <div
           className={`proctor-panel screen-panel ${isFullscreen ? 'screen-panel--fullscreen' : ''}`}
@@ -213,17 +158,12 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
           </div>
           <div className="panel-body screen-body" onDoubleClick={toggleFullscreen} title="Double-click để phóng to">
             <div className="proctor-zoom-viewport">
-              {screenFrame ? (
+              <StudentStreamImage
-                <img
+                studentId={studentId}
-                  src={screenFrame}
+                kind="screen"
-                  alt="Màn hình sinh viên"
                 className="live-frame screen-img"
                 style={{ transform: `scale(${screenZoom})` }}
-                  draggable={false}
               />
-              ) : (
-                <div className="no-stream-placeholder"><p>Đang chờ màn hình...</p></div>
-              )}
             </div>
           </div>
         </div>
@@ -236,17 +176,12 @@ export const ProctorStreamPanels: React.FC<ProctorStreamPanelsProps> = ({
             </div>
             <div className="panel-body webcam-body">
               <div className="proctor-zoom-viewport proctor-zoom-viewport--webcam">
-                {webcamFrame ? (
+                <StudentStreamImage
-                  <img
+                  studentId={studentId}
-                    src={webcamFrame}
+                  kind="webcam"
-                    alt="Webcam sinh viên"
                   className="live-frame webcam-img"
                   style={{ transform: `scale(${webcamZoom})` }}
-                    draggable={false}
                 />
-                ) : (
-                  <div className="no-stream-placeholder"><p>Đang chờ webcam...</p></div>
-                )}
               </div>
             </div>
           </div>

management/src/components/StudentDetailModal.tsx

@@ -8,8 +8,27 @@ interface StudentDetailModalProps {
   isOnline: boolean;
   sessionLog?: StudentSessionLogItem | null;
   onClose: () => void;
+  /** Mở sẵn phần giám sát (từ tab Giám sát / sơ đồ) */
+  initialShowProctor?: boolean;
 }
 
+type IconProps = { size?: number };
+
+const IconClose = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const IconMonitor = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="2" y="3" width="20" height="14" rx="2" />
+    <line x1="8" y1="21" x2="16" y2="21" />
+    <line x1="12" y1="17" x2="12" y2="21" />
+  </svg>
+);
+
 const formatDuration = (totalSeconds: number) => {
   const hrs = Math.floor(totalSeconds / 3600);
   const mins = Math.floor((totalSeconds % 3600) / 60);
@@ -23,24 +42,34 @@ export const StudentDetailModal: React.FC<StudentDetailModalProps> = ({
   isOnline,
   sessionLog,
   onClose,
+  initialShowProctor = false,
 }) => {
-  const [showProctor, setShowProctor] = useState(false);
+  const [showProctor, setShowProctor] = useState(initialShowProctor);
 
   return (
-    <div className="modal-overlay student-detail-overlay" onClick={onClose}>
+    <div
-      <div className={`modal-container student-detail-modal ${showProctor ? 'student-detail-modal--proctor' : ''}`} onClick={e => e.stopPropagation()}>
+      className={`modal-overlay student-detail-overlay${showProctor ? ' student-detail-overlay--proctor' : ''}`}
-        <div className="modal-header">
+      onClick={onClose}
+    >
+      <div
+        className={`modal-container student-detail-modal${showProctor ? ' student-detail-modal--proctor' : ''}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="modal-header student-detail-modal-header">
           <div className="student-detail-header">
-            <StudentAvatar fullName={student.fullName} avatar={student.avatar} isOnline={isOnline} size={56} />
+            <StudentAvatar fullName={student.fullName} avatar={student.avatar} isOnline={isOnline} size={showProctor ? 40 : 52} />
-            <div>
+            <div className="student-detail-title-block">
-              <h2 className="modal-title" style={{ margin: 0 }}>{student.fullName}</h2>
+              <h2 className="modal-title student-detail-name">{student.fullName}</h2>
-              <p style={{ margin: '4px 0 0', color: 'var(--text-muted)', fontSize: '0.85rem' }}>
+              <p className="student-detail-sub">
-                <span style={{ fontFamily: 'monospace', fontWeight: 700, color: 'var(--accent)' }}>{student.studentCode}</span>
+                <span className="student-detail-code">{student.studentCode}</span>
-                {student.email && <> · {student.email}</>}
+                {student.email && <span className="student-detail-email">{student.email}</span>}
               </p>
             </div>
           </div>
-          <button type="button" className="btn btn-secondary" onClick={onClose}>Đóng</button>
+          <button type="button" className="btn btn-secondary student-detail-close" onClick={onClose}>
+            <IconClose size={15} />
+            Đóng
+          </button>
         </div>
 
         <div className="student-detail-body">
@@ -62,20 +91,20 @@ export const StudentDetailModal: React.FC<StudentDetailModalProps> = ({
                 <>
                   <div className="student-meta-item">
                     <span className="student-meta-label">Online (ca)</span>
-                    <span className="student-meta-value" style={{ color: 'var(--success)', fontFamily: 'monospace' }}>
+                    <span className="student-meta-value student-meta-value--online">
                       {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' }}>
+                    <span className="student-meta-value student-meta-value--offline">
                       {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' }}>
+                      <span className="student-meta-value student-meta-value--mono">
                         {sessionLog.wifiSsids}
                       </span>
                     </div>
@@ -86,14 +115,14 @@ export const StudentDetailModal: React.FC<StudentDetailModalProps> = ({
 
             <button
               type="button"
-              className="btn btn-primary"
+              className={`btn student-detail-proctor-toggle ${showProctor ? 'btn-secondary' : 'btn-primary'}`}
-              style={{ width: '100%', justifyContent: 'center' }}
+              onClick={() => setShowProctor((v) => !v)}
-              onClick={() => setShowProctor(v => !v)}
             >
+              <IconMonitor size={14} />
               {showProctor ? 'Ẩn giám sát' : 'Xem webcam & màn hình'}
             </button>
             {!isOnline && !showProctor && (
-              <p className="schedule-hint" style={{ margin: 0 }}>
+              <p className="student-detail-hint">
                 Sinh viên offline — stream chỉ có khi app Simple Care đang chạy.
               </p>
             )}

management/src/components/StudentStreamImage.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { API_BASE } from '../api';
+
+interface StudentStreamImageProps {
+  studentId: number;
+  kind: 'screen' | 'webcam';
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const StudentStreamImage: React.FC<StudentStreamImageProps> = ({
+  studentId,
+  kind,
+  className,
+  style,
+}) => {
+  const [url, setUrl] = useState('');
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const token = localStorage.getItem('sc_staff_token') || '';
+    const tokenParam = token ? `?token=${encodeURIComponent(token)}` : '';
+    setUrl(`${API_BASE}/students/${studentId}/stream/${kind}${tokenParam}`);
+    setError(false);
+  }, [studentId, kind]);
+
+  const handleError = () => {
+    setError(true);
+    setTimeout(() => {
+      const token = localStorage.getItem('sc_staff_token') || '';
+      const tokenParam = token ? `?token=${encodeURIComponent(token)}` : '';
+      setUrl(`${API_BASE}/students/${studentId}/stream/${kind}${tokenParam}&t=${Date.now()}`);
+      setError(false);
+    }, 2000);
+  };
+
+  if (error || !url) {
+    return (
+      <div className="no-stream-placeholder">
+        <p>Đang chờ {kind === 'screen' ? 'màn hình' : 'webcam'}...</p>
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={url}
+      alt={`${kind === 'screen' ? 'Màn hình' : 'Webcam'} sinh viên`}
+      className={className}
+      style={style}
+      onError={handleError}
+      draggable={false}
+    />
+  );
+};

management/src/components/StudentsTab.tsx

@@ -2,6 +2,90 @@ import React, { useEffect, useState } from 'react';
 import { api } from '../api';
 import type { StudentItem, SyncStatus } from '../api';
 
+type IconProps = { size?: number };
+
+const IconUsers = ({ size = 22 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="3.5" />
+    <path d="M22 21v-2a3.5 3.5 0 0 0-2.5-3.35" />
+    <path d="M16 3.5a3.5 3.5 0 0 1 0 7" />
+  </svg>
+);
+
+const IconRefresh = ({ size = 18 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 12a9 9 0 1 1-2.6-6.3" />
+    <polyline points="21 3 21 9 15 9" />
+  </svg>
+);
+
+const IconCheck = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+const IconAlert = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="12" cy="12" r="9" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+    <line x1="12" y1="16" x2="12.01" y2="16" />
+  </svg>
+);
+
+const IconSearch = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="11" cy="11" r="7" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const IconMail = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="3" y="5" width="18" height="14" rx="2" />
+    <path d="m3 7 9 6 9-6" />
+  </svg>
+);
+
+const IconPhone = ({ size = 12 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c1.2.34 1.99.57 2.81.7A2 2 0 0 1 22 16.92z" />
+  </svg>
+);
+
+const IconCalendar = ({ size = 13 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <rect x="3" y="5" width="18" height="16" rx="2" />
+    <path d="M16 3v4M8 3v4M3 11h18" />
+  </svg>
+);
+
+const IconInbox = ({ size = 40 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
+const IconChevronLeft = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m15 18-6-6 6-6" />
+  </svg>
+);
+
+const IconChevronRight = ({ size = 16 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+);
+
+function genderLabel(gender: number | null | undefined) {
+  if (gender === 1) return 'Nam';
+  if (gender === 0) return 'Nữ';
+  return 'Khác';
+}
+
 export const StudentsTab: React.FC = () => {
   const [students, setStudents] = useState<StudentItem[]>([]);
   const [total, setTotal] = useState(0);
@@ -9,8 +93,6 @@ export const StudentsTab: React.FC = () => {
   const [pageSize] = useState(15);
   const [search, setSearch] = useState('');
   const [loading, setLoading] = useState(true);
-
-  // Sync state
   const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
 
   const fetchStudents = async () => {
@@ -49,7 +131,6 @@ export const StudentsTab: React.FC = () => {
     fetchSyncStatus();
   }, []);
 
-  // Sync polling logic
   useEffect(() => {
     let timer: any;
     if (syncStatus?.running) {
@@ -57,7 +138,7 @@ export const StudentsTab: React.FC = () => {
         const isRunning = await fetchSyncStatus();
         if (!isRunning) {
           clearInterval(timer);
-          fetchStudents(); // Reload data when sync completes
+          fetchStudents();
         }
       }, 2000);
     }
@@ -69,77 +150,83 @@ export const StudentsTab: React.FC = () => {
   const handleStartSync = async () => {
     try {
       await api.startStudentsSync();
-      // Set local state to running to trigger useEffect poller
       setSyncStatus({
         running: true,
         done: false,
         total: 0,
         synced: 0,
-        updatedAt: Date.now() / 1000
+        updatedAt: Date.now() / 1000,
       });
     } catch (err: any) {
       alert(err.message || 'Không thể bắt đầu đồng bộ sinh viên');
     }
   };
 
-  // Tính toán % tiến trình sync
+  const syncPercent =
-  const syncPercent = syncStatus && syncStatus.total > 0
+    syncStatus && syncStatus.total > 0
       ? Math.round((syncStatus.synced / syncStatus.total) * 100)
       : 0;
 
+  const totalPages = Math.ceil(total / pageSize) || 1;
+
   return (
     <div className="tab-page">
       <div className="tab-page-toolbar">
         <div className="page-header">
           <div className="page-title">
-          <h1>Danh Sách Sinh Viên</h1>
+            <h1 className="page-title-heading">
+              <span className="page-title-icon" aria-hidden>
+                <IconUsers />
+              </span>
+              Danh sách sinh viên
+            </h1>
             <p>Danh sách toàn bộ sinh viên trong hệ thống được đồng bộ</p>
           </div>
           <button
             className="btn btn-primary"
             onClick={handleStartSync}
             disabled={syncStatus?.running}
-          style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '0.75rem 1.5rem',
+              borderRadius: '12px',
+              fontWeight: 700,
+              boxShadow: '0 4px 14px rgba(187,33,38,0.25)',
+            }}
           >
             {syncStatus?.running ? (
               <>
-              <div className="sync-spinner"></div> Đồng bộ...
+                <div className="sync-spinner" style={{ width: 18, height: 18 }} />
+                Đồng bộ... {syncPercent}%
               </>
             ) : (
               <>
-              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block' }}>
+                <IconRefresh />
-                <path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-              </svg>
                 Đồng bộ toàn bộ SV
               </>
             )}
           </button>
         </div>
 
-      {/* Sync Status Banner */}
         {syncStatus && (syncStatus.running || syncStatus.done || syncStatus.error) && (
-        <div className="sync-progress-banner" style={{ borderStyle: 'solid', borderColor: 'var(--success)' }}>
+          <div className="sync-progress-banner">
             <div className="sync-header">
               <div className="sync-title">
-              {syncStatus.running && <div className="sync-spinner"></div>}
+                {syncStatus.running && <div className="sync-spinner" />}
                 <span>
                   {syncStatus.running && `Đang tải sinh viên... Trang ${syncStatus.page || 0} (${syncPercent}%)`}
                   {syncStatus.done && (
-                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--success)' }}>
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--success)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <IconCheck />
-                      <polyline points="20 6 9 17 4 12" />
+                      Đồng bộ hoàn tất!
-                    </svg>
-                    Đồng bộ toàn bộ sinh viên hoàn tất!
                     </span>
                   )}
                   {syncStatus.error && (
-                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px', color: 'var(--danger)' }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--danger)' }}>
-                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--danger)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <IconAlert />
-                      <circle cx="12" cy="12" r="10" />
+                      {syncStatus.error}
-                      <line x1="12" y1="8" x2="12" y2="12" />
-                      <line x1="12" y1="16" x2="12.01" y2="16" />
-                    </svg>
-                    Đồng bộ thất bại: {syncStatus.error}
                     </span>
                   )}
                 </span>
@@ -150,19 +237,22 @@ export const StudentsTab: React.FC = () => {
             </div>
             {syncStatus.running && (
               <div className="sync-bar-container">
-              <div className="sync-bar" style={{ width: `${syncPercent}%`, background: 'linear-gradient(to right, var(--success), #a7f3d0)' }}></div>
+                <div className="sync-bar" style={{ width: `${syncPercent}%` }} />
               </div>
             )}
             <div className="sync-meta">
               <span>Cập nhật lần cuối: {new Date(syncStatus.updatedAt * 1000).toLocaleString()}</span>
-            {syncStatus.running && <span style={{ color: 'var(--success)' }}>Hệ thống đang kéo dữ liệu trang {syncStatus.page}...</span>}
+              {syncStatus.running && (
+                <span style={{ color: 'var(--accent-hover)' }}>
+                  Hệ thống đang kéo dữ liệu trang {syncStatus.page}...
+                </span>
+              )}
             </div>
           </div>
         )}
 
-      {/* Control filters */}
         <div className="control-bar">
-        <div className="search-input-wrapper" style={{ maxWidth: '400px' }}>
+          <div className="search-input-wrapper">
             <input
               type="text"
               className="search-input"
@@ -174,142 +264,451 @@ export const StudentsTab: React.FC = () => {
               }}
             />
             <span className="search-icon">
-            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <IconSearch />
-              <circle cx="11" cy="11" r="8" />
-              <line x1="21" y1="21" x2="16.65" y2="16.65" />
-            </svg>
             </span>
           </div>
         </div>
       </div>
 
-      {/* Students Table */}
       <div className="tab-page-body">
         <div className="table-wrapper table-fill">
           {loading ? (
             <div className="empty-state">
-            <div className="sync-spinner" style={{ width: '32px', height: '32px' }}></div>
+              <div className="sync-spinner" style={{ width: 40, height: 40 }} />
-            <p style={{ marginTop: '0.5rem' }}>Đang tải danh sách sinh viên...</p>
+              <p style={{ marginTop: '1rem', fontWeight: 600 }}>Đang tải danh sách sinh viên...</p>
             </div>
           ) : students.length === 0 ? (
             <div className="empty-state">
               <div className="empty-state-icon" style={{ color: 'var(--text-muted)' }}>
-              <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <IconInbox />
-                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-                <circle cx="9" cy="7" r="4" />
-                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-              </svg>
               </div>
               <h2>Không có sinh viên nào</h2>
-            <p>Hãy thử thay đổi bộ lọc hoặc bấm nút "Đồng bộ toàn bộ SV" để tải dữ liệu.</p>
+              <p>Hãy thử thay đổi bộ lọc hoặc bấm "Đồng bộ toàn bộ SV" để tải dữ liệu.</p>
             </div>
           ) : (
-          <table className="data-table">
+            <div className="table-scroll-container">
+              <table className="data-table student-table">
                 <thead>
                   <tr>
-                <th>Mã SV</th>
+                    <th className="col-code">Mã SV</th>
-                <th>Họ Tên</th>
+                    <th className="col-name">Họ tên</th>
-                <th>Thông Tin Liên Hệ</th>
+                    <th className="col-contact">Thông tin liên hệ</th>
-                <th>Ngày sinh / Giới tính</th>
+                    <th className="col-birth">Ngày sinh / Giới tính</th>
-                <th>Phân hệ</th>
+                    <th className="col-system">Phân hệ</th>
-                <th>Địa điểm</th>
+                    <th className="col-location">Địa điểm</th>
-                <th>Trạng thái</th>
+                    <th className="col-status">Trạng thái</th>
                   </tr>
                 </thead>
                 <tbody>
-              {students.map(st => (
+                  {students.map(st => {
+                    const isActive = st.status === 'Đang học' || st.status === 'active';
+                    return (
                       <tr key={st.id}>
-                  <td style={{ fontWeight: 600 }}>{st.studentCode}</td>
+                        <td className="col-code" data-label="Mã SV">
-                  <td style={{ color: 'var(--text-primary)', fontWeight: 500 }}>
+                          <div className="student-code" title={st.studentCode || undefined}>
+                            {st.studentCode || '—'}
+                          </div>
+                        </td>
+                        <td className="col-name" data-label="Họ tên">
+                          <div className="student-name" title={st.fullName}>
                             {st.fullName}
-                    <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>ID: {st.rkId}</div>
+                          </div>
+                          <div className="student-id">ID: {st.rkId}</div>
                         </td>
-                  <td>
+                        <td className="col-contact" data-label="Thông tin liên hệ">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                          <div className="meta-row" title={st.email || undefined}>
-                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                            <IconMail />
-                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+                            <span className="meta-text">{st.email || '—'}</span>
-                        <polyline points="22,6 12,13 2,6" />
-                      </svg>
-                      {st.email}
                           </div>
-                    {st.phone && (
+                          {st.phone ? (
-                      <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: '6px', marginTop: '2px' }}>
+                            <div className="meta-row meta-row--secondary">
-                        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                              <IconPhone />
-                          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+                              <span className="meta-text">{st.phone}</span>
-                        </svg>
-                        {st.phone}
                             </div>
-                    )}
+                          ) : null}
                         </td>
-                  <td>
+                        <td className="col-birth" data-label="Ngày sinh / Giới tính">
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                          <div className="meta-row">
-                      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                            <IconCalendar />
-                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                            <span className="meta-text">
-                        <line x1="16" y1="2" x2="16" y2="6" />
+                              {st.dateOfBirth
-                        <line x1="8" y1="2" x2="8" y2="6" />
+                                ? new Date(st.dateOfBirth).toLocaleDateString('vi-VN')
-                        <line x1="3" y1="10" x2="21" y2="10" />
+                                : '—'}
-                      </svg>
+                            </span>
-                      {st.dateOfBirth ? new Date(st.dateOfBirth).toLocaleDateString('vi-VN') : '—'}
-                    </div>
-                    <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginTop: '2px' }}>
-                      Giới tính: {st.gender === 1 ? 'Nam' : st.gender === 0 ? 'Nữ' : 'Khác'}
                           </div>
+                          <div className="meta-sub">{genderLabel(st.gender)}</div>
                         </td>
-                  <td>
+                        <td className="col-system" data-label="Phân hệ">
-                    <span className="badge badge-muted">
+                          <span className="badge badge-system">
                             {st.systemName || 'Chung'}
                           </span>
                         </td>
-                  <td>{st.location || '—'}</td>
+                        <td className="col-location" data-label="Địa điểm">
-                  <td>
+                          <span className="location-text">{st.location || '—'}</span>
-                    <span className={`badge ${st.status === 'Đang học' || st.status === 'active' ? 'badge-success' : 'badge-muted'}`}>
+                        </td>
+                        <td className="col-status" data-label="Trạng thái">
+                          <span className={`badge badge-status ${isActive ? 'is-active' : 'is-muted'}`}>
                             {st.status || 'Đang học'}
                           </span>
                         </td>
                       </tr>
-              ))}
+                    );
+                  })}
                 </tbody>
               </table>
+            </div>
           )}
         </div>
       </div>
 
-      {/* Pagination controls */}
       {!loading && students.length > 0 && (
         <div className="tab-page-footer">
           <div className="pagination-row">
-          <div>
+            <div className="pagination-info">
-            Hiển thị sinh viên thứ <b>{((page - 1) * pageSize) + 1}</b> đến <b>{Math.min(page * pageSize, total)}</b> trong tổng số <b>{total}</b> sinh viên
+              Hiển thị <b>{(page - 1) * pageSize + 1}</b> –{' '}
+              <b>{Math.min(page * pageSize, total)}</b> trong tổng số <b>{total}</b> sinh viên
             </div>
             <div className="pagination-btn-group">
               <button
                 className="pagination-btn"
                 onClick={() => setPage(p => Math.max(1, p - 1))}
                 disabled={page === 1}
-              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+                aria-label="Trang trước"
               >
-              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <IconChevronLeft />
-                <polyline points="15 18 9 12 15 6" />
-              </svg>
               </button>
-            <span style={{ display: 'flex', alignItems: 'center', padding: '0 1rem', fontWeight: 600, color: 'var(--text-primary)' }}>
+              <span className="pagination-current">
-              Trang {page} / {Math.ceil(total / pageSize) || 1}
+                Trang {page} / {totalPages}
               </span>
               <button
                 className="pagination-btn"
                 onClick={() => setPage(p => p + 1)}
-              disabled={page >= Math.ceil(total / pageSize)}
+                disabled={page >= totalPages}
-              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
+                aria-label="Trang sau"
               >
-              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <IconChevronRight />
-                <polyline points="9 18 15 12 9 6" />
-              </svg>
               </button>
             </div>
           </div>
         </div>
       )}
+
+      <style>{`
+        .table-wrapper.table-fill {
+          overflow-x: hidden;
+          overflow-y: hidden;
+        }
+
+        .table-scroll-container {
+          overflow-x: hidden;
+          overflow-y: auto;
+          max-height: 100%;
+          height: 100%;
+        }
+
+        .page-title-heading {
+          display: flex;
+          align-items: center;
+          gap: 0.55rem;
+        }
+        .page-title-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--accent);
+          flex-shrink: 0;
+        }
+
+        .student-table {
+          width: 100%;
+          table-layout: fixed;
+          border-collapse: collapse;
+          font-size: 0.9rem;
+        }
+
+        .student-table thead th {
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background: var(--bg-subtle);
+          border-bottom: 2px solid var(--border-color);
+          padding: 0.75rem 0.9rem;
+          font-weight: 700;
+          font-size: 0.72rem;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          color: var(--text-muted);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .student-table td {
+          padding: 0.85rem 0.9rem;
+          border-bottom: 1px solid var(--border-light);
+          vertical-align: middle;
+          overflow: hidden;
+        }
+
+        .student-table .col-code { width: 12%; }
+        .student-table .col-name { width: 18%; }
+        .student-table .col-contact { width: 24%; }
+        .student-table .col-birth { width: 14%; }
+        .student-table .col-system { width: 12%; }
+        .student-table .col-location { width: 8%; }
+        .student-table .col-status { width: 12%; }
+
+        .student-table tbody tr {
+          transition: background 0.15s;
+        }
+        .student-table tbody tr:hover {
+          background: var(--bg-subtle) !important;
+        }
+
+        .student-code {
+          font-weight: 700;
+          color: var(--text-primary);
+          font-size: 0.9rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .student-name {
+          font-weight: 600;
+          color: var(--text-primary);
+          font-size: 0.9rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .student-id {
+          font-size: 0.72rem;
+          color: var(--text-muted);
+          margin-top: 0.1rem;
+        }
+
+        .meta-row {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          min-width: 0;
+          color: var(--text-primary);
+          font-size: 0.85rem;
+          line-height: 1.25;
+        }
+        .meta-row svg {
+          flex-shrink: 0;
+          color: var(--text-muted);
+          display: block;
+        }
+        .meta-row--secondary {
+          margin-top: 0.2rem;
+          color: var(--text-secondary);
+          font-size: 0.8rem;
+        }
+        .meta-text {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          min-width: 0;
+        }
+        .meta-sub {
+          margin-top: 0.2rem;
+          font-size: 0.8rem;
+          color: var(--text-secondary);
+          padding-left: 19px;
+        }
+
+        .badge-system {
+          background: var(--bg-subtle);
+          color: var(--text-secondary);
+          border: 1px solid var(--border-color);
+          padding: 0.2rem 0.55rem;
+          border-radius: 20px;
+          font-weight: 600;
+          font-size: 0.72rem;
+          display: inline-flex;
+          align-items: center;
+          max-width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          line-height: 1.2;
+        }
+
+        .location-text {
+          font-weight: 600;
+          font-size: 0.85rem;
+          color: var(--text-primary);
+          white-space: nowrap;
+        }
+
+        .badge-status {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 5.5rem;
+          padding: 0.2rem 0.55rem;
+          border-radius: 20px;
+          font-weight: 700;
+          font-size: 0.7rem;
+          text-transform: uppercase;
+          letter-spacing: 0.03em;
+          white-space: nowrap;
+          line-height: 1.2;
+          box-sizing: border-box;
+        }
+        .badge-status.is-active {
+          background: rgba(59, 130, 246, 0.1);
+          color: #2563eb;
+          border: 1px solid rgba(37, 99, 235, 0.2);
+        }
+        .badge-status.is-muted {
+          background: var(--bg-subtle);
+          color: var(--text-muted);
+          border: 1px solid var(--border-color);
+        }
+
+        .pagination-info {
+          font-size: 0.85rem;
+          color: var(--text-secondary);
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+
+        @media (max-width: 1280px) {
+          .student-table .col-birth {
+            display: none;
+          }
+          .student-table .col-code { width: 14%; }
+          .student-table .col-name { width: 20%; }
+          .student-table .col-contact { width: 28%; }
+          .student-table .col-system { width: 14%; }
+          .student-table .col-location { width: 10%; }
+          .student-table .col-status { width: 14%; }
+        }
+
+        @media (max-width: 1100px) {
+          .student-table .col-system,
+          .student-table .col-location {
+            display: none;
+          }
+          .student-table .col-code { width: 18%; }
+          .student-table .col-name { width: 28%; }
+          .student-table .col-contact { width: 36%; }
+          .student-table .col-status { width: 18%; }
+        }
+
+        @media (max-width: 960px) {
+          .student-table {
+            table-layout: auto;
+          }
+          .student-table thead {
+            display: none;
+          }
+          .student-table tbody tr {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0.5rem 1rem;
+            padding: 1rem;
+            border-radius: var(--radius-lg);
+            background: var(--bg-card);
+            box-shadow: var(--shadow-sm);
+            border: 1px solid var(--border-color);
+            margin-bottom: 0.75rem;
+          }
+          .student-table .col-birth,
+          .student-table .col-system,
+          .student-table .col-location {
+            display: flex;
+          }
+          .student-table td {
+            display: flex;
+            flex-direction: column;
+            padding: 0 !important;
+            border: none !important;
+            gap: 0.15rem;
+            overflow: visible;
+            width: auto !important;
+          }
+          .student-table td::before {
+            content: attr(data-label);
+            font-size: 0.6rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+          }
+          .student-table td.col-status {
+            grid-column: span 2;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 0.35rem;
+            padding-top: 0.5rem !important;
+            border-top: 1px dashed var(--border-color) !important;
+          }
+          .student-table td.col-status::before {
+            margin-bottom: 0;
+          }
+          .student-code,
+          .student-name,
+          .meta-text,
+          .badge-system {
+            white-space: normal;
+            overflow: visible;
+            text-overflow: unset;
+            word-break: break-word;
+          }
+          .meta-sub {
+            padding-left: 0;
+          }
+          .page-header {
+            flex-direction: column;
+            align-items: stretch;
+          }
+          .page-header .btn {
+            width: 100%;
+            justify-content: center;
+          }
+          .control-bar {
+            flex-direction: column;
+            align-items: stretch;
+          }
+          .search-input-wrapper {
+            max-width: 100%;
+          }
+          .pagination-row {
+            flex-direction: column;
+            gap: 0.75rem;
+            align-items: center;
+            text-align: center;
+          }
+          .pagination-info {
+            font-size: 0.75rem;
+          }
+        }
+
+        @media (max-width: 480px) {
+          .student-table tbody tr {
+            padding: 0.75rem;
+            gap: 0.4rem 0.75rem;
+          }
+          .student-code,
+          .student-name {
+            font-size: 0.8rem;
+          }
+          .badge-status {
+            min-width: 0;
+            font-size: 0.6rem;
+          }
+          .pagination-btn-group .pagination-btn {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      `}</style>
     </div>
   );
 };

management/src/components/ViolationsPanel.tsx

@@ -1,11 +1,47 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   apiFetchClassViolations,
   apiFetchExamViolations,
   VIOLATION_KIND_OPTIONS,
   type StudentViolationItem,
 } from '../api';
-import { kindLabel } from '../hooks/useStaffChatSocket';
+import { kindLabel, onStudentViolation } from '../hooks/useStaffChatSocket';
+
+/* ─── Icon components ─────────────────────────────────────────────────────── */
+
+type IconProps = { size?: number };
+
+const IconAlert = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="m10.29 3.86-8.19 14A2 2 0 0 0 3.82 21h16.36a2 2 0 0 0 1.72-3l-8.19-14a2 2 0 0 0-3.44 0z" />
+    <line x1="12" y1="9" x2="12" y2="13" />
+    <line x1="12" y1="17" x2="12.01" y2="17" />
+  </svg>
+);
+
+const IconInfo = ({ size = 15 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <circle cx="12" cy="12" r="9" />
+    <line x1="12" y1="8" x2="12" y2="12" />
+    <line x1="12" y1="16" x2="12.01" y2="16" />
+  </svg>
+);
+
+const IconRefresh = ({ size = 14 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M21 12a9 9 0 1 1-2.6-6.3" />
+    <polyline points="21 3 21 9 15 9" />
+  </svg>
+);
+
+const IconShieldOff = ({ size = 36 }: IconProps) => (
+  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+  </svg>
+);
+
+/* ─── Helpers ────────────────────────────────────────────────────────────── */
 
 type Props =
   | { mode: 'class'; classId: number }
@@ -24,7 +60,17 @@ function formatTime(iso?: string): string {
   return d.toLocaleString('vi-VN');
 }
 
-export const ViolationsPanel: React.FC<Props> = (props) => {
+function modeLabel(mode?: string): string {
+  switch (mode) {
+    case 'exam': return 'Phòng thi';
+    case 'learning': return 'Lớp học';
+    default: return mode || '—';
+  }
+}
+
+/* ─── Component ─────────────────────────────────────────────────────────── */
+
+export const ViolationsPanel = (props: Props) => {
   const [date, setDate] = useState(todayLocal);
   const [kind, setKind] = useState('');
   const [rows, setRows] = useState<StudentViolationItem[]>([]);
@@ -48,47 +94,128 @@ export const ViolationsPanel: React.FC<Props> = (props) => {
     }
   }, [props, date, kind]);
 
+  useEffect(() => { void load(); }, [load]);
+
   useEffect(() => {
+    return onStudentViolation((v) => {
+      const matches =
+        props.mode === 'class'
+          ? Number(v.classId) === props.classId
+          : Number(v.examRoomId) === props.examId ||
+            (!v.examRoomId && v.monitorMode === 'exam');
+      if (!matches) return;
+      if (date !== todayLocal()) return;
       void load();
-  }, [load]);
+    });
+  }, [props, date, load]);
+
+  const isExam = props.mode === 'exam';
 
   return (
-    <div className="session-logs-panel" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', height: '100%' }}>
+    <div className="vp-panel">
-      <div className="attendance-toolbar" style={{ marginBottom: 0, flexWrap: 'wrap' }}>
+      <style>{`
-        <label className="attendance-field">
+        .vp-panel { display: flex; flex-direction: column; gap: 0.65rem; height: 100%; }
+
+        /* Notice banner */
+        .vp-notice { padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid; border-left-width: 3px; font-size: 0.76rem; line-height: 1.5; display: flex; align-items: flex-start; gap: 0.45rem; }
+        .vp-notice--exam { background: rgba(254,243,199,0.6); border-color: #fcd34d; border-left-color: #d97706; color: #78350f; }
+        .vp-notice--exam svg { color: #d97706; }
+        .vp-notice--class { background: rgba(239,246,255,0.7); border-color: #bfdbfe; border-left-color: #3b82f6; color: #1e3a8a; }
+        .vp-notice--class svg { color: #3b82f6; }
+        .vp-notice svg { flex-shrink: 0; margin-top: 0.1rem; }
+
+        /* Toolbar */
+        .vp-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
+        .vp-field { display: flex; flex-direction: column; gap: 0.18rem; font-size: 0.71rem; font-weight: 600; color: var(--text-muted); }
+        .vp-input { padding: 0.3rem 0.5rem; font-size: 0.78rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); }
+        .vp-input:focus { outline: none; border-color: var(--accent); }
+        .vp-refresh { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.65rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: background 0.15s; white-space: nowrap; }
+        .vp-refresh:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-hover); }
+        .vp-refresh:disabled { opacity: 0.55; cursor: not-allowed; }
+        .vp-count { margin-left: auto; font-size: 0.77rem; color: var(--text-muted); font-weight: 600; align-self: flex-end; padding-bottom: 2px; }
+
+        /* Table wrapper */
+        .vp-table-scroll { flex: 1; overflow: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
+        .vp-table { width: 100%; border-collapse: collapse; }
+        .vp-table thead th { padding: 0.5rem 0.8rem; background: var(--bg-subtle); font-weight: 700; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
+        .vp-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.1s; }
+        .vp-table tbody tr:last-child { border-bottom: none; }
+        .vp-table tbody tr:hover { background: var(--bg-hover); }
+        .vp-table tbody tr.vp-row--close { background: rgba(239,68,68,0.04); }
+        .vp-table tbody tr.vp-row--close:hover { background: rgba(239,68,68,0.08); }
+        .vp-table tbody td { padding: 0.44rem 0.8rem; font-size: 0.82rem; vertical-align: middle; }
+
+        /* Empty state */
+        .vp-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.85rem; }
+        .vp-empty svg { opacity: 0.35; }
+        .vp-empty span { font-style: italic; }
+
+        /* Error */
+        .vp-error { font-size: 0.78rem; color: var(--danger); }
+      `}</style>
+
+      {/* ── Notice banner ── */}
+      <div className={`vp-notice${isExam ? ' vp-notice--exam' : ' vp-notice--class'}`}>
+        {isExam ? <IconAlert size={15} /> : <IconInfo size={15} />}
+        <span>
+          {isExam
+            ? 'Vi phạm trong phòng thi (tắt app, WiFi, môi trường…) được ghi nhận theo thời gian thực.'
+            : 'Vi phạm trong giờ học (tắt app, WiFi, môi trường…) hiển thị tại đây theo từng lớp.'}
+        </span>
+      </div>
+
+      {/* ── Toolbar ── */}
+      <div className="vp-toolbar attendance-toolbar">
+        <label className="vp-field attendance-field">
           <span>Ngày</span>
-          <input type="date" className="search-input" style={{ padding: '0.5rem 0.75rem' }} value={date} onChange={(e) => setDate(e.target.value)} />
+          <input
+            type="date"
+            className="vp-input search-input"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+          />
         </label>
-        <label className="attendance-field">
+        <label className="vp-field attendance-field">
-          <span>Loại</span>
+          <span>Loại vi phạm</span>
-          <select className="select-filter" value={kind} onChange={(e) => setKind(e.target.value)}>
+          <select
+            className="vp-input select-filter"
+            value={kind}
+            onChange={(e) => setKind(e.target.value)}
+          >
             {VIOLATION_KIND_OPTIONS.map((o) => (
               <option key={o.value || 'all'} value={o.value}>{o.label}</option>
             ))}
           </select>
         </label>
-        <button type="button" className="btn btn-secondary btn-sm" onClick={() => void load()} disabled={loading}>
+        <button
+          type="button"
+          className="vp-refresh btn btn-secondary btn-sm"
+          onClick={() => void load()}
+          disabled={loading}
+          style={{ alignSelf: 'flex-end' }}
+        >
+          <IconRefresh size={14} />
           {loading ? 'Đang tải...' : 'Làm mới'}
         </button>
-        <span style={{ marginLeft: 'auto', fontSize: '0.82rem', color: 'var(--text-muted)', fontWeight: 600 }}>
+        <span className="vp-count">{rows.length} vi phạm</span>
-          {rows.length} vi phạm
-        </span>
       </div>
 
-      {err && <div className="form-error" style={{ margin: 0 }}>{err}</div>}
+      {/* ── Error message ── */}
+      {err && <div className="vp-error form-error">{err}</div>}
 
-      <div className="attendance-table-scroll table-wrapper" style={{ border: 'none', flex: 1, overflowY: 'auto' }}>
+      {/* ── Table ── */}
+      <div className="vp-table-scroll attendance-table-scroll table-wrapper">
         {loading && rows.length === 0 ? (
-          <div className="empty-state" style={{ minHeight: '220px' }}>
+          <div className="vp-empty">
-            <div className="sync-spinner" style={{ width: '32px', height: '32px' }} />
+            <div className="sync-spinner" style={{ width: 28, height: 28 }} />
-            <p style={{ marginTop: '0.5rem' }}>Đang tải vi phạm...</p>
           </div>
         ) : rows.length === 0 ? (
-          <div className="empty-state" style={{ minHeight: '220px' }}>
+          <div className="vp-empty">
-            <p>Không có vi phạm trong ngày đã chọn.</p>
+            <IconShieldOff size={36} />
+            <span>Không có vi phạm trong ngày đã chọn.</span>
           </div>
         ) : (
-          <table className="data-table">
+          <table className="vp-table data-table">
             <thead>
               <tr>
                 <th>Thời gian</th>
@@ -96,28 +223,29 @@ export const ViolationsPanel: React.FC<Props> = (props) => {
                 <th>Mã SV</th>
                 <th>Loại</th>
                 <th>Chi tiết</th>
-                <th>Chế độ</th>
+                <th>Ngữ cảnh</th>
               </tr>
             </thead>
             <tbody>
-              {rows.map((r) => (
+              {rows.map((r) => {
-                <tr key={r.id}>
+                const isClose = r.kind === 'app_closed' || r.kind === 'unclean_shutdown';
-                  <td style={{ whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.8rem' }}>
+                return (
+                  <tr key={r.id} className={isClose ? 'vp-row--close' : ''}>
+                    <td style={{ whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.75rem' }}>
                       {formatTime(r.createdAt || r.clientAt)}
                     </td>
                     <td style={{ fontWeight: 600 }}>{r.fullName || '—'}</td>
-                  <td><code>{r.studentCode || r.studentRkId}</code></td>
+                    <td><code style={{ fontSize: '0.78rem' }}>{r.studentCode || r.studentRkId}</code></td>
                     <td>
-                    <span className="badge badge-warning" style={{ fontSize: '0.72rem' }}>
+                      <span className={`badge ${isClose ? 'badge-danger' : 'badge-warning'}`} style={{ fontSize: '0.68rem', fontWeight: 600, padding: '0.15rem 0.4rem' }}>
                         {kindLabel(r.kind)}
                       </span>
                     </td>
-                  <td style={{ maxWidth: 360, fontSize: '0.85rem' }} title={r.reason}>
+                    <td style={{ maxWidth: 320, fontSize: '0.8rem' }} title={r.reason}>{r.reason}</td>
-                    {r.reason}
+                    <td style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{modeLabel(r.monitorMode)}</td>
-                  </td>
-                  <td style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{r.monitorMode || '—'}</td>
                   </tr>
-              ))}
+                );
+              })}
             </tbody>
           </table>
         )}

management/src/hooks/useStaffChatSocket.ts

@@ -13,6 +13,7 @@ export type StudentViolationEvent = {
   reason: string;
   monitorMode?: string;
   classId?: number;
+  examRoomId?: number;
 };
 
 const chatHandlers = new Set<ChatIncomingHandler>();
@@ -41,7 +42,7 @@ function scheduleBackoff(attempt: number): number {
 
 export function kindLabel(kind: string): string {
   switch (kind) {
-    case 'app_closed': return 'Tự đóng app';
+    case 'app_closed': return 'Tắt ứng dụng';
     case 'unclean_shutdown': return 'Tắt đột ngột';
     case 'multi_monitor': return 'Nhiều màn hình';
     case 'user_switch': return 'Đổi user';
@@ -123,6 +124,7 @@ export function StaffChatSocket() {
               reason: String(payload.data?.reason || ''),
               monitorMode: payload.data?.monitorMode || '',
               classId: Number(payload.data?.classId ?? 0) || undefined,
+              examRoomId: Number(payload.data?.examRoomId ?? 0) || undefined,
             }));
             return;
           }

server/internal/db/db.go

@@ -73,6 +73,7 @@ func AutoMigrate(db *gorm.DB) error {
 		&models.GuideLink{},
 		&models.AppDownload{},
 		&models.AppGuide{},
+		&models.LocalLeaveRequest{},
 	); err != nil {
 		return err
 	}

server/internal/db/exam_status.go

@@ -54,6 +54,11 @@ func ExamRoomCanCancel(room models.ExamRoom, now time.Time) bool {
 	return ExamRoomIsLive(room, now)
 }
 
+// ExamRoomCanExtend — gia hạn giờ kết thúc khi phòng đang thi.
+func ExamRoomCanExtend(room models.ExamRoom, now time.Time) bool {
+	return ExamRoomIsLive(room, now)
+}
+
 // ProcessExamRoomLifecycle đánh dấu phòng ready đã quá giờ kết thúc.
 func ProcessExamRoomLifecycle(db *gorm.DB) {
 	now := time.Now()

server/internal/handlers/handlers_attendance.go

@@ -565,11 +565,40 @@ func GetLeaveRequestsHandler(db *gorm.DB, qldtClient *qldt.Client) fiber.Handler
 			return c.Status(fiber.StatusBadGateway).JSON(fiber.Map{"error": err.Error()})
 		}
 
-		var data any
+		var data []map[string]interface{}
 		if err := json.Unmarshal(body, &data); err != nil {
+			var fallback any
+			if errFallback := json.Unmarshal(body, &fallback); errFallback == nil {
+				return c.JSON(fallback)
+			}
 			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Failed to parse QLDT response"})
 		}
 
+		// Ghi đè trạng thái duyệt local nếu có
+		var localReqs []models.LocalLeaveRequest
+		if err := db.Find(&localReqs).Error; err == nil && len(localReqs) > 0 {
+			localMap := make(map[int64]string)
+			for _, lr := range localReqs {
+				localMap[lr.LeaveID] = lr.Status
+			}
+			for i, item := range data {
+				if idVal, ok := item["id"]; ok {
+					var idInt int64
+					switch v := idVal.(type) {
+					case float64:
+						idInt = int64(v)
+					case int64:
+						idInt = v
+					case int:
+						idInt = int64(v)
+					}
+					if localStatus, found := localMap[idInt]; found {
+						data[i]["status"] = localStatus
+					}
+				}
+			}
+		}
+
 		return c.JSON(data)
 	}
 }
@@ -594,15 +623,24 @@ func UpdateLeaveStatusHandler(db *gorm.DB, qldtClient *qldt.Client) fiber.Handle
 			return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Trạng thái phê duyệt không hợp lệ"})
 		}
 
-		token := GetQldtToken(db)
+		// 1. Lưu trạng thái đơn phép vào database local thay vì gọi QLDT Portal API
-		if token == "" {
+		var localLeave models.LocalLeaveRequest
-			return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "QLDT_TOKEN chưa cấu hình"})
+		errLocal := db.Where("leave_id = ?", leaveID).First(&localLeave).Error
+		if errLocal == gorm.ErrRecordNotFound {
+			localLeave = models.LocalLeaveRequest{
+				LeaveID: leaveID,
+				Status:  req.Status,
 			}
-
+			if err := db.Create(&localLeave).Error; err != nil {
-		// 1. Gửi lệnh cập nhật status qua QLDT Portal API
+				return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Lỗi lưu đơn phép local: " + err.Error()})
-		body, err := qldtClient.UpdateLeaveStatus(context.Background(), token, leaveID, req.Status)
+			}
-		if err != nil {
+		} else if errLocal == nil {
-			return c.Status(fiber.StatusBadGateway).JSON(fiber.Map{"error": err.Error(), "body": string(body)})
+			localLeave.Status = req.Status
+			if err := db.Save(&localLeave).Error; err != nil {
+				return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Lỗi cập nhật đơn phép local: " + err.Error()})
+			}
+		} else {
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": errLocal.Error()})
 		}
 
 		// 2. Nếu status là "Phê duyệt", tự động cập nhật điểm danh trong hệ thống của chúng ta thành "Nghỉ có phép"

server/internal/handlers/handlers_exam.go

@@ -14,6 +14,7 @@ import (
 	"time"
 
 	internalDb "server/internal/db"
+	"server/internal/middleware"
 	"server/internal/models"
 	internalWs "server/internal/websocket"
 
@@ -120,8 +121,15 @@ func deliverExamPaper(db *gorm.DB, enrollmentID uint) {
 // GET /api/exam-rooms
 func ListExamRoomsHandler(db *gorm.DB) fiber.Handler {
 	return func(c *fiber.Ctx) error {
+		staffID := middleware.StaffIDFromCtx(c)
+		mineOnly := c.Query("mine") == "1" || c.Query("mine") == "true"
+
+		q := db.Order("start_time desc")
+		if mineOnly && staffID > 0 {
+			q = q.Where("created_by_staff_id = ?", staffID)
+		}
 		var rooms []models.ExamRoom
-		if err := db.Order("start_time desc").Find(&rooms).Error; err != nil {
+		if err := q.Find(&rooms).Error; err != nil {
 			return c.Status(500).JSON(fiber.Map{"error": err.Error()})
 		}
 		type row struct {
@@ -129,6 +137,7 @@ func ListExamRoomsHandler(db *gorm.DB) fiber.Handler {
 			StudentCount     int    `json:"studentCount"`
 			PaperCount       int    `json:"paperCount"`
 			DisplayStatus    string `json:"displayStatus"`
+			CreatedByStaffID uint   `json:"createdByStaffId"`
 		}
 		out := make([]row, 0, len(rooms))
 		now := time.Now()
@@ -144,6 +153,7 @@ func ListExamRoomsHandler(db *gorm.DB) fiber.Handler {
 				StudentCount:     int(sc),
 				PaperCount:       int(pc),
 				DisplayStatus:    internalDb.ExamDisplayStatus(r, now),
+				CreatedByStaffID: r.CreatedByStaffID,
 			})
 		}
 		return c.JSON(fiber.Map{"data": out})
@@ -183,6 +193,7 @@ func CreateExamRoomHandler(db *gorm.DB) fiber.Handler {
 			AllowedApps:      apps,
 			QuizURL:          strings.TrimSpace(req.QuizURL),
 			Status:           models.ExamStatusDraft,
+			CreatedByStaffID: middleware.StaffIDFromCtx(c),
 		}
 		if err := db.Create(&room).Error; err != nil {
 			return c.Status(500).JSON(fiber.Map{"error": err.Error()})
@@ -259,8 +270,9 @@ func GetExamRoomHandler(db *gorm.DB) fiber.Handler {
 			"editable":      internalDb.ExamRoomEditable(room),
 			"prepEditable":  internalDb.ExamRoomPrepEditable(room, now),
 			"canPublish":    room.Status == models.ExamStatusDraft,
-			"canUnpublish":  internalDb.ExamRoomCanUnpublish(room, time.Now()),
+			"canUnpublish":  internalDb.ExamRoomCanUnpublish(room, now),
-			"canCancel":     internalDb.ExamRoomCanCancel(room, time.Now()),
+			"canCancel":     internalDb.ExamRoomCanCancel(room, now),
+			"canExtend":     internalDb.ExamRoomCanExtend(room, now),
 		})
 	}
 }
@@ -307,8 +319,15 @@ func UpdateExamRoomHandler(db *gorm.DB) fiber.Handler {
 		if err := c.BodyParser(&req); err != nil {
 			return c.Status(400).JSON(fiber.Map{"error": "Invalid body"})
 		}
+		now := time.Now()
+		ds := internalDb.ExamDisplayStatus(room, now)
 		if !internalDb.ExamRoomEditable(room) {
-			if room.Status == models.ExamStatusReady {
+			if ds == "active" {
+				// Đang thi: chỉ cho sửa app được phép + giờ kết thúc (gia hạn)
+				if req.Name != nil || req.StartTime != nil || req.QuizURL != nil {
+					return c.Status(403).JSON(fiber.Map{"error": "Khi đang thi chỉ được sửa ứng dụng được phép hoặc gia hạn giờ kết thúc"})
+				}
+			} else if room.Status == models.ExamStatusReady {
 				if req.Name != nil || req.StartTime != nil || req.EndTime != nil || req.QuizURL != nil {
 					return c.Status(403).JSON(fiber.Map{"error": "Chỉ sửa được cấu hình ứng dụng được phép khi phòng thi đã đẩy hoặc đang thi"})
 				}
@@ -331,6 +350,14 @@ func UpdateExamRoomHandler(db *gorm.DB) fiber.Handler {
 			if err != nil {
 				return c.Status(400).JSON(fiber.Map{"error": "endTime không hợp lệ"})
 			}
+			if ds == "active" {
+				if !t.After(now) {
+					return c.Status(400).JSON(fiber.Map{"error": "Giờ kết thúc mới phải sau thời điểm hiện tại"})
+				}
+				if !t.After(room.EndTime) {
+					return c.Status(400).JSON(fiber.Map{"error": "Gia hạn phải chọn giờ kết thúc muộn hơn giờ hiện tại của phòng"})
+				}
+			}
 			room.EndTime = t
 		}
 		if !room.EndTime.After(room.StartTime) {
@@ -420,13 +447,54 @@ func CancelExamRoomHandler(db *gorm.DB) fiber.Handler {
 	}
 }
 
+// POST /api/exam-rooms/:id/extend — gia hạn thêm phút cho phòng đang thi
+func ExtendExamRoomHandler(db *gorm.DB) fiber.Handler {
+	return func(c *fiber.Ctx) error {
+		id, err := parseUintParam(c, "id")
+		if err != nil {
+			return c.Status(400).JSON(fiber.Map{"error": "Invalid id"})
+		}
+		var req struct {
+			Minutes int `json:"minutes"`
+		}
+		if err := c.BodyParser(&req); err != nil {
+			return c.Status(400).JSON(fiber.Map{"error": "Invalid body"})
+		}
+		if req.Minutes < 1 || req.Minutes > 480 {
+			return c.Status(400).JSON(fiber.Map{"error": "Số phút gia hạn phải từ 1 đến 480"})
+		}
+		var room models.ExamRoom
+		if err := db.First(&room, id).Error; err != nil {
+			return c.Status(404).JSON(fiber.Map{"error": "Không tìm thấy"})
+		}
+		now := time.Now()
+		if !internalDb.ExamRoomCanExtend(room, now) {
+			return c.Status(403).JSON(fiber.Map{"error": "Chỉ gia hạn được phòng thi đang diễn ra"})
+		}
+		base := room.EndTime
+		if !base.After(now) {
+			base = now
+		}
+		room.EndTime = base.Add(time.Duration(req.Minutes) * time.Minute)
+		if err := db.Save(&room).Error; err != nil {
+			return c.Status(500).JSON(fiber.Map{"error": err.Error()})
+		}
+		return c.JSON(fiber.Map{
+			"ok":            true,
+			"room":          room,
+			"displayStatus": internalDb.ExamDisplayStatus(room, time.Now()),
+			"addedMinutes":  req.Minutes,
+			"endTime":       room.EndTime,
+		})
+	}
+}
+
 // DELETE /api/exam-rooms/:id
 func DeleteExamRoomHandler(db *gorm.DB) fiber.Handler {
 	return func(c *fiber.Ctx) error {
+		staffID := middleware.StaffIDFromCtx(c)
 		email, _ := c.Locals("staffEmail").(string)
-		if email != "phuocntb@rikkeiacademy.com" {
+		isSuperAdmin := email == "phuocntb@rikkeiacademy.com"
-			return c.Status(403).JSON(fiber.Map{"error": "Bạn không có quyền thực hiện chức năng này"})
-		}
 
 		id, err := parseUintParam(c, "id")
 		if err != nil {
@@ -436,6 +504,9 @@ func DeleteExamRoomHandler(db *gorm.DB) fiber.Handler {
 		if err := db.First(&room, id).Error; err != nil {
 			return c.Status(404).JSON(fiber.Map{"error": "Không tìm thấy"})
 		}
+		if !isSuperAdmin && (room.CreatedByStaffID == 0 || room.CreatedByStaffID != staffID) {
+			return c.Status(403).JSON(fiber.Map{"error": "Chỉ người tạo phòng hoặc admin mới được xóa"})
+		}
 		if internalDb.ExamRoomIsLive(room, time.Now()) {
 			return c.Status(403).JSON(fiber.Map{"error": "Không thể xóa phòng thi đang diễn ra — hãy hủy phòng trước"})
 		}
@@ -451,6 +522,7 @@ func DeleteExamRoomHandler(db *gorm.DB) fiber.Handler {
 			_ = db.Where("exam_paper_id = ?", p.ID).Delete(&models.ExamPaperResource{}).Error
 		}
 		_ = db.Where("exam_room_id = ?", id).Delete(&models.ExamPaper{}).Error
+		_ = db.Where("exam_room_id = ?", id).Delete(&models.ExamSeatingLayout{}).Error
 		_ = db.Delete(&room).Error
 		return c.JSON(fiber.Map{"ok": true})
 	}
@@ -593,8 +665,9 @@ func RemoveExamRoomStudentHandler(db *gorm.DB) fiber.Handler {
 		if err := db.First(&room, roomID).Error; err != nil {
 			return c.Status(404).JSON(fiber.Map{"error": "Không tìm thấy"})
 		}
-		if !internalDb.ExamRoomPrepEditable(room, time.Now()) {
+		ds := internalDb.ExamDisplayStatus(room, time.Now())
-			return c.Status(403).JSON(fiber.Map{"error": "Phòng thi đã bắt đầu — không thể xóa sinh viên"})
+		if ds == models.ExamStatusEnded {
+			return c.Status(403).JSON(fiber.Map{"error": "Phòng thi đã kết thúc — không thể xóa sinh viên"})
 		}
 		_ = db.Where("exam_room_id = ? AND student_rk_id = ?", roomID, studentRkID).Delete(&models.ExamRoomStudent{}).Error
 		return c.JSON(fiber.Map{"ok": true})

server/internal/handlers/handlers_learning.go

@@ -744,6 +744,8 @@ func ReportViolationHandler(db *gorm.DB) fiber.Handler {
 			Reason      string `json:"reason"`
 			MonitorMode string `json:"monitorMode"`
 			ClientAt    string `json:"clientAt"` // RFC3339 optional
+			ClassRkID   int64  `json:"classRkId"`
+			ExamRoomID  uint   `json:"examRoomId"`
 		}
 		if err := c.BodyParser(&req); err != nil {
 			return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid payload format"})
@@ -763,7 +765,19 @@ func ReportViolationHandler(db *gorm.DB) fiber.Handler {
 		if reason == "" {
 			reason = kind
 		}
-		classID := internalDb.FindActiveClassForStudent(db, req.StudentRkID)
+
+		classID := req.ClassRkID
+		if classID <= 0 {
+			classID = internalDb.FindActiveClassForStudent(db, req.StudentRkID)
+		}
+
+		examRoomID := req.ExamRoomID
+		if examRoomID == 0 && monitorMode == "exam" {
+			if examInfo := internalDb.FindActiveExamForStudent(db, req.StudentRkID); examInfo != nil {
+				examRoomID = examInfo.Room.ID
+			}
+		}
+
 		clientAt := time.Now()
 		if t, err := time.Parse(time.RFC3339, strings.TrimSpace(req.ClientAt)); err == nil {
 			clientAt = t
@@ -772,6 +786,7 @@ func ReportViolationHandler(db *gorm.DB) fiber.Handler {
 		row := models.StudentViolation{
 			StudentRkID: req.StudentRkID,
 			ClassRkID:   classID,
+			ExamRoomID:  examRoomID,
 			Kind:        kind,
 			Reason:      reason,
 			MonitorMode: monitorMode,
@@ -802,6 +817,7 @@ func ReportViolationHandler(db *gorm.DB) fiber.Handler {
 			"studentName":  studentName,
 			"studentCode":  studentCode,
 			"classId":      classID,
+			"examRoomId":   examRoomID,
 			"kind":         kind,
 			"reason":       reason,
 			"monitorMode":  row.MonitorMode,
@@ -809,7 +825,7 @@ func ReportViolationHandler(db *gorm.DB) fiber.Handler {
 			"createdAt":    row.CreatedAt.Format(time.RFC3339),
 		})
 
-		return c.JSON(fiber.Map{"ok": true, "id": row.ID})
+		return c.JSON(fiber.Map{"ok": true, "id": row.ID, "classRkId": classID, "examRoomId": examRoomID})
 	}
 }
 
@@ -819,6 +835,7 @@ type studentViolationItem struct {
 	StudentCode string    `json:"studentCode"`
 	FullName    string    `json:"fullName"`
 	ClassRkID   int64     `json:"classRkId"`
+	ExamRoomID  uint      `json:"examRoomId"`
 	Kind        string    `json:"kind"`
 	Reason      string    `json:"reason"`
 	MonitorMode string    `json:"monitorMode"`
@@ -844,7 +861,7 @@ func ListClassViolationsHandler(db *gorm.DB) fiber.Handler {
 			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": err.Error()})
 		}
 		if len(mappings) == 0 {
-			return c.JSON(fiber.Map{"data": []any{}})
+			return c.JSON(fiber.Map{"data": []any{}, "date": date})
 		}
 		studentIDs := make([]int64, 0, len(mappings))
 		for _, m := range mappings {
@@ -866,7 +883,11 @@ func ListClassViolationsHandler(db *gorm.DB) fiber.Handler {
 		}
 		dayEnd := dayStart.Add(24 * time.Hour)
 
-		q := db.Where("student_rk_id IN ? AND created_at >= ? AND created_at < ?", studentIDs, dayStart, dayEnd)
+		// Ưu tiên vi phạm gắn đúng lớp; fallback bản ghi cũ (class_rk_id=0) của SV trong lớp khi đang học
+		q := db.Where(
+			"created_at >= ? AND created_at < ? AND ((class_rk_id = ?) OR (class_rk_id = 0 AND monitor_mode = ? AND student_rk_id IN ?))",
+			dayStart, dayEnd, classRkID, "learning", studentIDs,
+		)
 		if kindFilter != "" {
 			q = q.Where("kind = ?", kindFilter)
 		}
@@ -878,12 +899,16 @@ func ListClassViolationsHandler(db *gorm.DB) fiber.Handler {
 		out := make([]studentViolationItem, 0, len(rows))
 		for _, r := range rows {
 			st := nameByID[r.StudentRkID]
+			if st.RkID == 0 {
+				_ = db.Where("rk_id = ?", r.StudentRkID).First(&st).Error
+			}
 			out = append(out, studentViolationItem{
 				ID:          r.ID,
 				StudentRkID: r.StudentRkID,
 				StudentCode: st.StudentCode,
 				FullName:    st.FullName,
 				ClassRkID:   r.ClassRkID,
+				ExamRoomID:  r.ExamRoomID,
 				Kind:        r.Kind,
 				Reason:      r.Reason,
 				MonitorMode: r.MonitorMode,
@@ -913,7 +938,7 @@ func ListExamRoomViolationsHandler(db *gorm.DB) fiber.Handler {
 			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": err.Error()})
 		}
 		if len(roster) == 0 {
-			return c.JSON(fiber.Map{"data": []any{}})
+			return c.JSON(fiber.Map{"data": []any{}, "date": date})
 		}
 		studentIDs := make([]int64, 0, len(roster))
 		for _, s := range roster {
@@ -933,7 +958,11 @@ func ListExamRoomViolationsHandler(db *gorm.DB) fiber.Handler {
 		}
 		dayEnd := dayStart.Add(24 * time.Hour)
 
-		q := db.Where("student_rk_id IN ? AND created_at >= ? AND created_at < ?", studentIDs, dayStart, dayEnd)
+		// Ưu tiên exam_room_id; fallback bản ghi cũ (exam_room_id=0, mode=exam) của SV trong phòng
+		q := db.Where(
+			"created_at >= ? AND created_at < ? AND ((exam_room_id = ?) OR (exam_room_id = 0 AND monitor_mode = ? AND student_rk_id IN ?))",
+			dayStart, dayEnd, id, "exam", studentIDs,
+		)
 		if kindFilter != "" {
 			q = q.Where("kind = ?", kindFilter)
 		}
@@ -951,6 +980,7 @@ func ListExamRoomViolationsHandler(db *gorm.DB) fiber.Handler {
 				StudentCode: st.StudentCode,
 				FullName:    st.FullName,
 				ClassRkID:   r.ClassRkID,
+				ExamRoomID:  r.ExamRoomID,
 				Kind:        r.Kind,
 				Reason:      r.Reason,
 				MonitorMode: r.MonitorMode,

server/internal/middleware/staff.go

@@ -11,10 +11,16 @@ import (
 func RequireStaff() fiber.Handler {
 	return func(c *fiber.Ctx) error {
 		header := c.Get("Authorization")
-		if header == "" || !strings.HasPrefix(header, "Bearer ") {
+		var token string
+		if header != "" && strings.HasPrefix(header, "Bearer ") {
+			token = strings.TrimSpace(strings.TrimPrefix(header, "Bearer "))
+		} else {
+			token = c.Query("token")
+		}
+
+		if token == "" {
 			return c.Status(fiber.StatusUnauthorized).JSON(fiber.Map{"error": "Unauthorized"})
 		}
-		token := strings.TrimSpace(strings.TrimPrefix(header, "Bearer "))
 		claims, err := auth.ParseToken(token)
 		if err != nil {
 			return c.Status(fiber.StatusUnauthorized).JSON(fiber.Map{"error": "Invalid or expired token"})

server/internal/models/exam.go

@@ -23,6 +23,7 @@ type ExamRoom struct {
 	GitBranch         string    `gorm:"column:git_branch;size:64;default:main" json:"gitBranch"`
 	GitPublishURL     string    `gorm:"column:git_publish_url;size:1024" json:"gitPublishUrl,omitempty"`
 	Status            string    `gorm:"column:status;size:16;not null;default:draft;index" json:"status"`
+	CreatedByStaffID  uint      `gorm:"column:created_by_staff_id;index;default:0" json:"createdByStaffId"`
 }
 
 func (ExamRoom) TableName() string { return "exam_rooms" }

server/internal/models/models.go

@@ -203,6 +203,7 @@ type StudentViolation struct {
 	CreatedAt   time.Time `json:"createdAt"`
 	StudentRkID int64     `gorm:"column:student_rk_id;not null;index" json:"studentRkId"`
 	ClassRkID   int64     `gorm:"column:class_rk_id;index" json:"classRkId"`
+	ExamRoomID  uint      `gorm:"column:exam_room_id;index;default:0" json:"examRoomId"`
 	Kind        string    `gorm:"column:kind;size:64;not null;index" json:"kind"` // app_closed | unclean_shutdown | multi_monitor | user_switch | session_change | virtual_desktop | wifi | guard
 	Reason      string    `gorm:"column:reason;type:text" json:"reason"`
 	MonitorMode string    `gorm:"column:monitor_mode;size:32" json:"monitorMode"`
@@ -255,4 +256,16 @@ type AppGuide struct {
 
 func (AppGuide) TableName() string { return "app_guides" }
 
+// LocalLeaveRequest lưu trạng thái phê duyệt đơn xin nghỉ phép trên hệ thống nội bộ thay vì call QLĐT
+type LocalLeaveRequest struct {
+	ID        uint      `gorm:"primaryKey" json:"id"`
+	CreatedAt time.Time `json:"createdAt"`
+	UpdatedAt time.Time `json:"updatedAt"`
+	LeaveID   int64     `gorm:"column:leave_id;uniqueIndex;not null" json:"leaveId"`
+	Status    string    `gorm:"column:status;size:32;not null" json:"status"` // "Phê duyệt" hoặc "Từ chối"
+}
+
+func (LocalLeaveRequest) TableName() string { return "local_leave_requests" }
+
+
 

server/internal/websocket/websocket.go

@@ -1,15 +1,21 @@
 package websocket
 
 import (
+	"bufio"
+	"encoding/base64"
 	"encoding/json"
+	"fmt"
 	"log"
 	"strconv"
+	"strings"
 	"sync"
 	"time"
 
+	internalDb "server/internal/db"
+
+	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/websocket/v2"
 	"gorm.io/gorm"
-	internalDb "server/internal/db"
 )
 
 const (
@@ -60,6 +66,10 @@ type WsHub struct {
 	subscribers           map[int64][]string // studentId -> list of teacher connection addresses
 	grace                 map[int64]offlineGrace
 	graceTimers           map[int64]*time.Timer
+	subscriberModes       map[string]string    // "teacherAddr_studentId" -> "grid"|"focus"
+	lastRelayed           map[string]time.Time // "teacherAddr_studentId_event" -> time
+	httpScreenSubscribers map[int64][]chan []byte // studentId -> list of channels for screen MJPEG
+	httpWebcamSubscribers map[int64][]chan []byte // studentId -> list of channels for webcam MJPEG
 }
 
 var Hub = &WsHub{
@@ -69,6 +79,10 @@ var Hub = &WsHub{
 	subscribers:           make(map[int64][]string),
 	grace:                 make(map[int64]offlineGrace),
 	graceTimers:           make(map[int64]*time.Timer),
+	subscriberModes:       make(map[string]string),
+	lastRelayed:           make(map[string]time.Time),
+	httpScreenSubscribers: make(map[int64][]chan []byte),
+	httpWebcamSubscribers: make(map[int64][]chan []byte),
 }
 
 func (h *WsHub) IsStudentOnline(studentRkID int64) bool {
@@ -317,6 +331,12 @@ func (h *WsHub) Unregister(c *SocketClient) {
 					newList = append(newList, addr)
 				}
 			}
+			// Clean up mode map for this student and teacher
+			key := c.Addr + "_" + strconv.FormatInt(sID, 10)
+			delete(h.subscriberModes, key)
+			delete(h.lastRelayed, key+"_screenshot_stream_frame")
+			delete(h.lastRelayed, key+"_webcam_stream_frame")
+
 			if len(newList) == 0 {
 				delete(h.subscribers, sID)
 				if student, exists := h.students[sID]; exists {
@@ -330,7 +350,7 @@ func (h *WsHub) Unregister(c *SocketClient) {
 	}
 }
 
-func (h *WsHub) Subscribe(teacherAddr string, studentID int64) {
+func (h *WsHub) Subscribe(teacherAddr string, studentID int64, mode string) {
 	h.mu.Lock()
 	defer h.mu.Unlock()
 
@@ -344,9 +364,12 @@ func (h *WsHub) Subscribe(teacherAddr string, studentID int64) {
 	}
 	if !alreadySubscribed {
 		h.subscribers[studentID] = append(teachersList, teacherAddr)
-		log.Printf("[WS] Teacher %s subscribed to student %d stream", teacherAddr, studentID)
+		log.Printf("[WS] Teacher %s subscribed to student %d stream in %s mode", teacherAddr, studentID, mode)
 	}
 
+	key := teacherAddr + "_" + strconv.FormatInt(studentID, 10)
+	h.subscriberModes[key] = mode
+
 	if student, exists := h.students[studentID]; exists {
 		_ = student.WriteJSON(SocketMsg{Event: "start_screenshot_stream"})
 		_ = student.WriteJSON(SocketMsg{Event: "start_webcam_stream"})
@@ -357,6 +380,11 @@ func (h *WsHub) Unsubscribe(teacherAddr string, studentID int64) {
 	h.mu.Lock()
 	defer h.mu.Unlock()
 
+	key := teacherAddr + "_" + strconv.FormatInt(studentID, 10)
+	delete(h.subscriberModes, key)
+	delete(h.lastRelayed, key+"_screenshot_stream_frame")
+	delete(h.lastRelayed, key+"_webcam_stream_frame")
+
 	teachersList, exists := h.subscribers[studentID]
 	if !exists {
 		return
@@ -381,55 +409,105 @@ func (h *WsHub) Unsubscribe(teacherAddr string, studentID int64) {
 	}
 }
 
-func (h *WsHub) RelayFrame(studentID int64, event string, data map[string]any) {
+func (h *WsHub) RelayFrameRaw(studentID int64, event string, rawImageBuffer json.RawMessage) {
-	h.mu.RLock()
+	h.mu.Lock()
+	defer h.mu.Unlock()
+
+	// Broadcast to HTTP subscribers if any
+	if event == "screenshot_stream_frame" {
+		subs, exists := h.httpScreenSubscribers[studentID]
+		if exists && len(subs) > 0 {
+			var b64Str string
+			if err := json.Unmarshal(rawImageBuffer, &b64Str); err == nil && len(b64Str) > 0 {
+				if idx := strings.Index(b64Str, ","); idx != -1 {
+					b64Str = b64Str[idx+1:]
+				}
+				if rawBytes, err := base64.StdEncoding.DecodeString(b64Str); err == nil {
+					for _, ch := range subs {
+						select {
+						case ch <- rawBytes:
+						default:
+						}
+					}
+				}
+			}
+		}
+	} else if event == "webcam_stream_frame" {
+		subs, exists := h.httpWebcamSubscribers[studentID]
+		if exists && len(subs) > 0 {
+			var b64Str string
+			if err := json.Unmarshal(rawImageBuffer, &b64Str); err == nil && len(b64Str) > 0 {
+				if idx := strings.Index(b64Str, ","); idx != -1 {
+					b64Str = b64Str[idx+1:]
+				}
+				if rawBytes, err := base64.StdEncoding.DecodeString(b64Str); err == nil {
+					for _, ch := range subs {
+						select {
+						case ch <- rawBytes:
+						default:
+						}
+					}
+				}
+			}
+		}
+	}
+
 	teachersList, exists := h.subscribers[studentID]
 	if !exists || len(teachersList) == 0 {
-		h.mu.RUnlock()
 		return
 	}
-	addrs := make([]string, len(teachersList))
-	copy(addrs, teachersList)
-	h.mu.RUnlock()
 
 	relayEvent := "teacher:screenshot-stream-frame"
 	if event == "webcam_stream_frame" {
 		relayEvent = "teacher:webcam-stream-frame"
 	}
 
-	msg := SocketMsg{
+	type RelayFrameRawMsg struct {
-		Event: relayEvent,
+		Event string `json:"event"`
-		Data: map[string]any{
+		Data  struct {
-			"studentId":   studentID,
+			StudentID   int64           `json:"studentId"`
-			"imageBuffer": data["imageBuffer"],
+			ImageBuffer json.RawMessage `json:"imageBuffer"`
-		},
+		} `json:"data"`
 	}
+
+	msg := RelayFrameRawMsg{
+		Event: relayEvent,
+	}
+	msg.Data.StudentID = studentID
+	msg.Data.ImageBuffer = rawImageBuffer
+
 	msgBytes, err := json.Marshal(msg)
 	if err != nil {
 		return
 	}
 
-	var dead []string
+	now := time.Now()
-	h.mu.RLock()
+	for _, addr := range teachersList {
-	for _, addr := range addrs {
+		t, found := h.teachers[addr]
-		if t, found := h.teachers[addr]; found {
+		if !found || t == nil {
-			if err := t.WriteRaw(msgBytes); err != nil {
+			continue
-				log.Printf("[WS] Relay to teacher %s failed: %v", addr, err)
-				dead = append(dead, addr)
 		}
-		}
-	}
-	h.mu.RUnlock()
 
-	for _, addr := range dead {
+		subKey := addr + "_" + strconv.FormatInt(studentID, 10)
-		if t, ok := func() (*SocketClient, bool) {
+		mode := h.subscriberModes[subKey]
-			h.mu.RLock()
+
-			defer h.mu.RUnlock()
+		if mode == "grid" {
-			t, ok := h.teachers[addr]
+			// In grid mode, rate limit to max 1 frame per 3 seconds per stream type
-			return t, ok
+			relayKey := subKey + "_" + event
-		}(); ok && t != nil {
+			lastTime, ok := h.lastRelayed[relayKey]
-			_ = t.Conn.Close()
+			if ok && now.Sub(lastTime) < 3*time.Second {
+				continue
 			}
+			h.lastRelayed[relayKey] = now
+		}
+
+		// Send asynchronously to avoid head-of-line blocking on slower clients
+		go func(client *SocketClient, data []byte) {
+			if err := client.WriteRaw(data); err != nil {
+				log.Printf("[WS] Relay to teacher %s failed: %v", client.Addr, err)
+				_ = client.Conn.Close()
+			}
+		}(t, msgBytes)
 	}
 }
 
@@ -497,6 +575,29 @@ func WebSocketHandler(db *gorm.DB) func(*websocket.Conn) {
 			}
 			_ = c.SetReadDeadline(time.Now().Add(wsPongWait))
 
+			type EventOnlyMsg struct {
+				Event string `json:"event"`
+			}
+			var eventMsg EventOnlyMsg
+			if err := json.Unmarshal(msgBytes, &eventMsg); err != nil {
+				continue
+			}
+
+			if eventMsg.Event == "screenshot_stream_frame" || eventMsg.Event == "webcam_stream_frame" {
+				var frameMsg struct {
+					Data struct {
+						ImageBuffer json.RawMessage `json:"imageBuffer"`
+					} `json:"data"`
+				}
+				if err := json.Unmarshal(msgBytes, &frameMsg); err == nil && len(frameMsg.Data.ImageBuffer) > 0 {
+					// Copy slice to avoid memory race / corruption since WebSocket read buffer gets recycled
+					bufCopy := make([]byte, len(frameMsg.Data.ImageBuffer))
+					copy(bufCopy, frameMsg.Data.ImageBuffer)
+					Hub.RelayFrameRaw(client.StudentID, eventMsg.Event, json.RawMessage(bufCopy))
+				}
+				continue
+			}
+
 			var msg SocketMsg
 			if err := json.Unmarshal(msgBytes, &msg); err != nil {
 				continue
@@ -506,9 +607,6 @@ func WebSocketHandler(db *gorm.DB) func(*websocket.Conn) {
 			case "client:ping":
 				_ = client.WriteJSON(SocketMsg{Event: "client:pong", Data: map[string]any{"t": time.Now().UnixMilli()}})
 
-			case "screenshot_stream_frame", "webcam_stream_frame":
-				Hub.RelayFrame(client.StudentID, msg.Event, msg.Data)
-
 			case "teacher:subscribe":
 				if client.Role == "teacher" {
 					if sIDVal, ok := msg.Data["studentId"]; ok {
@@ -519,8 +617,15 @@ func WebSocketHandler(db *gorm.DB) func(*websocket.Conn) {
 						case string:
 							sID, _ = strconv.ParseInt(v, 10, 64)
 						}
+
+						// Nhận chế độ subscription (mặc định là "focus")
+						mode := "focus"
+						if mVal, ok := msg.Data["mode"].(string); ok && mVal != "" {
+							mode = mVal
+						}
+
 						if sID > 0 {
-							Hub.Subscribe(client.Addr, sID)
+							Hub.Subscribe(client.Addr, sID, mode)
 						}
 					}
 				}
@@ -544,3 +649,134 @@ func WebSocketHandler(db *gorm.DB) func(*websocket.Conn) {
 		}
 	}
 }
+
+func (h *WsHub) RegisterHttpSubscriber(studentID int64, kind string) chan []byte {
+	h.mu.Lock()
+	defer h.mu.Unlock()
+
+	ch := make(chan []byte, 16)
+	if kind == "screen" {
+		h.httpScreenSubscribers[studentID] = append(h.httpScreenSubscribers[studentID], ch)
+	} else if kind == "webcam" {
+		h.httpWebcamSubscribers[studentID] = append(h.httpWebcamSubscribers[studentID], ch)
+	}
+
+	// Always trigger streams start if there's any HTTP subscriber
+	if student, exists := h.students[studentID]; exists {
+		_ = student.WriteJSON(SocketMsg{Event: "start_screenshot_stream"})
+		_ = student.WriteJSON(SocketMsg{Event: "start_webcam_stream"})
+	}
+
+	return ch
+}
+
+func (h *WsHub) UnregisterHttpSubscriber(studentID int64, kind string, ch chan []byte) {
+	h.mu.Lock()
+	defer h.mu.Unlock()
+
+	if kind == "screen" {
+		subs := h.httpScreenSubscribers[studentID]
+		var next []chan []byte
+		for _, c := range subs {
+			if c != ch {
+				next = append(next, c)
+			}
+		}
+		if len(next) == 0 {
+			delete(h.httpScreenSubscribers, studentID)
+		} else {
+			h.httpScreenSubscribers[studentID] = next
+		}
+	} else if kind == "webcam" {
+		subs := h.httpWebcamSubscribers[studentID]
+		var next []chan []byte
+		for _, c := range subs {
+			if c != ch {
+				next = append(next, c)
+			}
+		}
+		if len(next) == 0 {
+			delete(h.httpWebcamSubscribers, studentID)
+		} else {
+			h.httpWebcamSubscribers[studentID] = next
+		}
+	}
+
+	// If no subscribers left (WS or HTTP), stop student's stream
+	wsSubs := h.subscribers[studentID]
+	httpScSubs := h.httpScreenSubscribers[studentID]
+	httpCamSubs := h.httpWebcamSubscribers[studentID]
+
+	if len(wsSubs) == 0 && len(httpScSubs) == 0 && len(httpCamSubs) == 0 {
+		if student, exists := h.students[studentID]; exists {
+			_ = student.WriteJSON(SocketMsg{Event: "stop_screenshot_stream"})
+			_ = student.WriteJSON(SocketMsg{Event: "stop_webcam_stream"})
+		}
+	}
+
+	close(ch)
+}
+
+func GetStudentScreenStreamHandler(c *fiber.Ctx) error {
+	studentIDVal := c.Params("studentId")
+	studentID, err := strconv.ParseInt(studentIDVal, 10, 64)
+	if err != nil {
+		return c.Status(fiber.StatusBadRequest).SendString("Invalid student ID")
+	}
+
+	ch := Hub.RegisterHttpSubscriber(studentID, "screen")
+	c.Set("Content-Type", "multipart/x-mixed-replace; boundary=frame")
+	c.Set("Cache-Control", "no-cache")
+	c.Set("Connection", "keep-alive")
+	c.Set("Pragma", "no-cache")
+
+	c.Status(fiber.StatusOK)
+	c.Context().SetBodyStreamWriter(func(w *bufio.Writer) {
+		defer Hub.UnregisterHttpSubscriber(studentID, "screen", ch)
+
+		for frame := range ch {
+			_, _ = fmt.Fprintf(w, "--frame\r\n")
+			_, _ = fmt.Fprintf(w, "Content-Type: image/jpeg\r\n")
+			_, _ = fmt.Fprintf(w, "Content-Length: %d\r\n\r\n", len(frame))
+			_, _ = w.Write(frame)
+			_, _ = fmt.Fprintf(w, "\r\n")
+			if err := w.Flush(); err != nil {
+				return
+			}
+		}
+	})
+
+	return nil
+}
+
+func GetStudentWebcamStreamHandler(c *fiber.Ctx) error {
+	studentIDVal := c.Params("studentId")
+	studentID, err := strconv.ParseInt(studentIDVal, 10, 64)
+	if err != nil {
+		return c.Status(fiber.StatusBadRequest).SendString("Invalid student ID")
+	}
+
+	ch := Hub.RegisterHttpSubscriber(studentID, "webcam")
+	c.Set("Content-Type", "multipart/x-mixed-replace; boundary=frame")
+	c.Set("Cache-Control", "no-cache")
+	c.Set("Connection", "keep-alive")
+	c.Set("Pragma", "no-cache")
+
+	c.Status(fiber.StatusOK)
+	c.Context().SetBodyStreamWriter(func(w *bufio.Writer) {
+		defer Hub.UnregisterHttpSubscriber(studentID, "webcam", ch)
+
+		for frame := range ch {
+			_, _ = fmt.Fprintf(w, "--frame\r\n")
+			_, _ = fmt.Fprintf(w, "Content-Type: image/jpeg\r\n")
+			_, _ = fmt.Fprintf(w, "Content-Length: %d\r\n\r\n", len(frame))
+			_, _ = w.Write(frame)
+			_, _ = fmt.Fprintf(w, "\r\n")
+			if err := w.Flush(); err != nil {
+				return
+			}
+		}
+	})
+
+	return nil
+}

server/main.go

@@ -141,6 +141,8 @@ func main() {
 
 	// Students endpoints
 	staff.Get("/students", handlers.ListAllStudentsHandler(gormDB))
+	staff.Get("/students/:studentId/stream/screen", internalWs.GetStudentScreenStreamHandler)
+	staff.Get("/students/:studentId/stream/webcam", internalWs.GetStudentWebcamStreamHandler)
 
 	// Sync endpoints
 	staff.Post("/sync/classes/start", handlers.StartClassesSyncHandler(gormDB, qldtClient, classesJob))
@@ -211,6 +213,7 @@ func main() {
 	staff.Post("/exam-rooms/:id/publish", handlers.PublishExamRoomHandler(gormDB))
 	staff.Post("/exam-rooms/:id/unpublish", handlers.UnpublishExamRoomHandler(gormDB))
 	staff.Post("/exam-rooms/:id/cancel", handlers.CancelExamRoomHandler(gormDB))
+	staff.Post("/exam-rooms/:id/extend", handlers.ExtendExamRoomHandler(gormDB))
 	staff.Post("/exam-rooms/:id/assign-random", handlers.RandomAssignExamPapersHandler(gormDB))
 	staff.Post("/exam-rooms/:id/assign-papers-batch", handlers.AssignExamPapersBatchHandler(gormDB))
 	staff.Get("/exam-rooms/:id/seating-layout", handlers.GetExamSeatingLayoutHandler(gormDB))

walkthrough.md

@@ -0,0 +1,73 @@
+# Walkthrough - Attendance Local Approval, Modal Redesign & Native HTTP MJPEG Streaming
+
+We have successfully updated the leave requests approval logic to operate locally, redesigned the attendance panel into a spacious full-height modal, and implemented a high-performance native HTTP MJPEG streaming architecture based on `raia_v3`.
+
+## Changes Made
+
+### 1. Backend Implementation
+
+#### Leave Approvals & Redesign
+- **Model Addition** ([models.go](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/server/internal/models/models.go)):
+  - Defined `LocalLeaveRequest` to keep track of approvals and rejections locally inside Simple Care database.
+- **Database Migration** ([db.go](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/server/internal/db/db.go)):
+  - Registered `LocalLeaveRequest` model for Gorm AutoMigrate.
+- **Approval Logic** ([handlers_attendance.go](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/server/internal/handlers/handlers_attendance.go)):
+  - Modified `UpdateLeaveStatusHandler` to store status overrides directly to the local database, completely bypassing the external `qldtClient.UpdateLeaveStatus` API call.
+- **Leave Query status overriding** ([handlers_attendance.go](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/server/internal/handlers/handlers_attendance.go)):
+  - Modified `GetLeaveRequestsHandler` to intercept the QLDT API list response and override the status field of leave requests with the stored local database values before returning it to the frontend.
+
+#### High-Performance HTTP MJPEG Streaming
+- **HTTP MJPEG Endpoint Support** ([websocket.go](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/server/internal/websocket/websocket.go)):
+  - Added `RegisterHttpSubscriber` and `UnregisterHttpSubscriber` methods to `WsHub` to manage active HTTP streaming connections dynamically.
+  - Implemented `GetStudentScreenStreamHandler` and `GetStudentWebcamStreamHandler` Fiber controllers.
+  - Upon receiving streaming frames over the WebSocket connection from a student, the server decodes the base64 JPEGs to raw binary JPEGs and feeds them directly to the corresponding HTTP MJPEG channels.
+  - Automatically triggers the student's screenshot/webcam capture stream when an HTTP connection is established, and stops it when all subscribers disconnect, saving huge amounts of client CPU and network bandwidth.
+- **Unified Query Parameter Auth** ([staff.go](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/server/internal/middleware/staff.go)):
+  - Updated `RequireStaff()` middleware to accept the JWT token from the query parameter `?token=...` if no `Authorization` header is present. This allows standard `<img>` tags to securely request stream data.
+- **Stream Routing** ([main.go](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/server/main.go)):
+  - Registered routes `/api/students/:studentId/stream/screen` and `/api/students/:studentId/stream/webcam` under the authenticated `staff` router.
+
+---
+
+### 2. Frontend UI / UX Redesign
+
+#### Modal wrapper for Attendance
+- **Modal layout** ([AttendancePanel.tsx](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/components/AttendancePanel.tsx)):
+  - Redesigned the main container of `<AttendancePanel>` to be a full-screen backdrop modal (`.attendance-modal-overlay` and `.attendance-modal-container`) with a top header containing a close button (`&times;`).
+- **Modal Dismiss callback** ([ClassWorkspace.tsx](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/components/ClassWorkspace.tsx)):
+  - Configured `onClose` callback on the `<AttendancePanel>` to automatically navigate the teacher back to the roster tab ('roster') when they dismiss the modal.
+- **Leave Modal Notices** ([AttendancePanel.tsx](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/components/AttendancePanel.tsx)):
+  - Added a clear alert notice informing teachers that approving or rejecting a leave request records the action locally inside Simple Care only and does not sync back to the QLDT portal. Approving will mark the student's status to "Nghỉ có phép".
+- **Responsive CSS Styles** ([index.css](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/index.css)):
+  - Implemented `.attendance-modal-overlay`, `.attendance-modal-container`, and `.attendance-modal-body` CSS styles. The container utilizes `width: 98vw !important` and `height: 96vh !important` to provide a spacious UI layout with full scroll support, avoiding squeezed tables on small screens and low-height devices.
+- **Exam Violations Notice** ([ViolationsPanel.tsx](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/components/ViolationsPanel.tsx)):
+  - Added an amber warning notice label in the violations list tab specifically during exam mode (`props.mode === 'exam'`) stating: *"Lưu ý: Chức năng theo dõi vi phạm đang được theo dõi đánh giá tính chuẩn xác, hiện tại kết quả chạy thử chỉ mang tính chất tham khảo."*
+
+#### Native Stream Rendering (MJPEG)
+- **StudentStreamImage Component** ([StudentStreamImage.tsx](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/components/StudentStreamImage.tsx)):
+  - Created a reusable component that binds directly to the HTTP stream.
+  - Automatically manages connection establishment, listens to error states (e.g. when a student is offline or stream is dropped), and retries the connection after a small delay.
+- **Stream Panel Integration** ([ProctorStreamPanels.tsx](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/components/ProctorStreamPanels.tsx)):
+  - Rewrote the panel component to render screens and webcams using `<StudentStreamImage>`.
+  - Completely removed all complex WebSocket subscription state management, subscriptions, and connection setups from the component, eliminating lag, thread blocks, and frontend JSON parsing overhead.
+- **Grid View Integration** ([ExamGridProctor.tsx](file:///c:/Users/PhuocNTB/Desktop/simple_care_project/management/src/components/ExamGridProctor.tsx)):
+  - Simplified the grid view by using `<StudentStreamImage>` for both card frames and the zoomed modal.
+  - Bypassed WebSocket connections completely for grid monitoring, reducing frontend CPU load and rendering overhead to zero.
+
+---
+
+## Verification Results
+
+### Backend Compile Check
+- Built Go code successfully:
+  ```powershell
+  go build -o server_test.exe main.go
+  ```
+  Backend compiles cleanly without errors.
+
+### Frontend Build Check
+- Ran Vite production compilation:
+  ```powershell
+  npx tsc --noEmit
+  ```
+  Frontend builds and type-checks successfully with all TS checks passing.