tam chat

management/src/App.tsx

@@ -4,9 +4,12 @@ import { ClassesTab } from './components/ClassesTab';
 import { StudentsTab } from './components/StudentsTab';
 import { LearningTab } from './components/LearningTab';
 import { NetworkTab } from './components/NetworkTab';
+import { AccountsTab } from './components/AccountsTab';
+import { ChatWidget } from './components/ChatWidget';
 import { ClassWorkspace } from './components/ClassWorkspace';
 import { NavHistoryBar, useRoute } from './components/NavHistoryBar';
 import { goBack, navigate, parseRoute, pushNav, TAB_LABELS, type TabId } from './navigation';
+import { useAuth } from './auth/AuthContext';
 
 const IconDashboard = () => (
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -46,8 +49,16 @@ const IconNetwork = () => (
   </svg>
 );
 
+const IconAccounts = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+);
+
 function App() {
   const route = useRoute();
+  const { staff, logout } = useAuth();
 
   useEffect(() => {
     const initial = parseRoute();
@@ -128,14 +139,27 @@ function App() {
                 Quản lý mạng
               </button>
             </li>
+
+            <div className="nav-header">Hệ thống</div>
+            <li className="nav-item">
+              <button
+                className={`nav-btn ${route.tab === 'accounts' && !route.classId ? 'active' : ''}`}
+                onClick={() => navigate('accounts')}
+              >
+                <span className="nav-icon"><IconAccounts /></span>
+                Tài khoản
+              </button>
+            </li>
           </ul>
         </nav>
 
         <div className="sidebar-footer">
-          <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 500 }}>Kết nối hệ thống</div>
-          <div className="token-badge" title="Token QLDT_TOKEN load từ server .env">
-            QLDT_TOKEN đã kết nối
+          <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 500 }}>
+            {staff?.email}
           </div>
+          <button type="button" className="link-btn" onClick={logout} style={{ marginTop: '0.35rem' }}>
+            Đăng xuất
+          </button>
         </div>
       </aside>
 
@@ -157,10 +181,12 @@ function App() {
               {route.tab === 'students' && <StudentsTab />}
               {route.tab === 'learning' && <LearningTab />}
               {route.tab === 'network' && <NetworkTab />}
+              {route.tab === 'accounts' && <AccountsTab />}
             </>
           )}
         </div>
       </main>
+      <ChatWidget />
     </>
   );
 }