This commit is contained in:
2026-06-30 11:51:34 +07:00
parent fd08bee7ab
commit 0abf48ea2d
28 changed files with 3514 additions and 37 deletions

View File

@@ -3,6 +3,8 @@ import { DashboardTab } from './components/DashboardTab';
import { ClassesTab } from './components/ClassesTab';
import { StudentsTab } from './components/StudentsTab';
import { LearningTab } from './components/LearningTab';
import { ExamsTab } from './components/ExamsTab';
import { ExamRoomWorkspace } from './components/ExamRoomWorkspace';
import { NetworkTab } from './components/NetworkTab';
import { EmailDomainsTab, MyAccountTab } from './components/AccountsTab';
import { ChatWidget } from './components/ChatWidget';
@@ -41,6 +43,14 @@ const IconLearning = () => (
</svg>
);
const IconExam = () => (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<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" />
</svg>
);
const IconNetwork = () => (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 12.55a11 11 0 0 1 14.08 0" />
@@ -63,7 +73,7 @@ function App() {
useEffect(() => {
const initial = parseRoute();
if (initial.classId) {
if (initial.classId || initial.examId) {
return;
}
pushNav({ kind: 'tab', tab: initial.tab, label: TAB_LABELS[initial.tab] });
@@ -73,10 +83,12 @@ function App() {
navigate(tab as TabId);
};
const handleBackFromClass = () => {
const handleBackFromWorkspace = () => {
goBack(route.tab);
};
const inWorkspace = Boolean(route.classId || route.examId);
return (
<>
<aside className="sidebar">
@@ -93,7 +105,7 @@ function App() {
<div className="nav-header">Tổng quan</div>
<li className="nav-item">
<button
className={`nav-btn ${route.tab === 'dashboard' && !route.classId ? 'active' : ''}`}
className={`nav-btn ${route.tab === 'dashboard' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('dashboard')}
>
<span className="nav-icon"><IconDashboard /></span>
@@ -104,7 +116,7 @@ function App() {
<div className="nav-header">CSDL liên kết</div>
<li className="nav-item">
<button
className={`nav-btn ${route.tab === 'classes' && !route.classId ? 'active' : ''}`}
className={`nav-btn ${route.tab === 'classes' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('classes')}
>
<span className="nav-icon"><IconClass /></span>
@@ -113,7 +125,7 @@ function App() {
</li>
<li className="nav-item">
<button
className={`nav-btn ${route.tab === 'students' && !route.classId ? 'active' : ''}`}
className={`nav-btn ${route.tab === 'students' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('students')}
>
<span className="nav-icon"><IconStudent /></span>
@@ -124,7 +136,7 @@ function App() {
<div className="nav-header">Quản học tập</div>
<li className="nav-item">
<button
className={`nav-btn ${route.tab === 'learning' && !route.classId ? 'active' : ''}`}
className={`nav-btn ${route.tab === 'learning' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('learning')}
>
<span className="nav-icon"><IconLearning /></span>
@@ -133,7 +145,16 @@ function App() {
</li>
<li className="nav-item">
<button
className={`nav-btn ${route.tab === 'network' && !route.classId ? 'active' : ''}`}
className={`nav-btn ${route.tab === 'exams' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('exams')}
>
<span className="nav-icon"><IconExam /></span>
Phòng thi
</button>
</li>
<li className="nav-item">
<button
className={`nav-btn ${route.tab === 'network' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('network')}
>
<span className="nav-icon"><IconNetwork /></span>
@@ -144,7 +165,7 @@ function App() {
<div className="nav-header">Hệ thống</div>
<li className="nav-item">
<button
className={`nav-btn ${route.tab === 'email-domains' && !route.classId ? 'active' : ''}`}
className={`nav-btn ${route.tab === 'email-domains' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('email-domains')}
>
<span className="nav-icon"><IconEmail /></span>
@@ -157,7 +178,7 @@ function App() {
<div className="sidebar-footer">
<button
type="button"
className={`sidebar-user-btn ${route.tab === 'profile' && !route.classId ? 'active' : ''}`}
className={`sidebar-user-btn ${route.tab === 'profile' && !inWorkspace ? 'active' : ''}`}
onClick={() => navigate('profile')}
title="Tài khoản của tôi"
>
@@ -178,17 +199,20 @@ function App() {
<ClassWorkspace
classId={route.classId}
sourceTab={route.tab}
onBack={handleBackFromClass}
onBack={handleBackFromWorkspace}
renderNavBar={(className) => (
<NavHistoryBar classLabel={className} onBack={handleBackFromClass} />
<NavHistoryBar classLabel={className} onBack={handleBackFromWorkspace} />
)}
/>
) : route.examId ? (
<ExamRoomWorkspace examId={route.examId} onBack={handleBackFromWorkspace} />
) : (
<>
{route.tab === 'dashboard' && <DashboardTab onNavigate={setActiveTab} />}
{route.tab === 'classes' && <ClassesTab />}
{route.tab === 'students' && <StudentsTab />}
{route.tab === 'learning' && <LearningTab />}
{route.tab === 'exams' && <ExamsTab />}
{route.tab === 'network' && <NetworkTab />}
{route.tab === 'email-domains' && <EmailDomainsTab />}
{route.tab === 'profile' && <MyAccountTab />}