add account web

management/src/App.tsx

@@ -4,7 +4,7 @@ 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 { EmailDomainsTab, MyAccountTab } from './components/AccountsTab';
 import { ChatWidget } from './components/ChatWidget';
 import { StaffChatSocket } from './hooks/useStaffChatSocket';
 import { ClassWorkspace } from './components/ClassWorkspace';
@@ -50,10 +50,10 @@ const IconNetwork = () => (
   </svg>
 );
 
-const IconAccounts = () => (
+const IconEmail = () => (
   <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" />
+    <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>
 );
 
@@ -144,21 +144,29 @@ function App() {
             <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')}
+                className={`nav-btn ${route.tab === 'email-domains' && !route.classId ? 'active' : ''}`}
+                onClick={() => navigate('email-domains')}
               >
-                <span className="nav-icon"><IconAccounts /></span>
-                Tài khoản
+                <span className="nav-icon"><IconEmail /></span>
+                Đuôi email
               </button>
             </li>
           </ul>
         </nav>
 
         <div className="sidebar-footer">
-          <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' }}>
+          <button
+            type="button"
+            className={`sidebar-user-btn ${route.tab === 'profile' && !route.classId ? 'active' : ''}`}
+            onClick={() => navigate('profile')}
+            title="Tài khoản của tôi"
+          >
+            <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>
+          </button>
+          <button type="button" className="link-btn" onClick={logout}>
             Đăng xuất
           </button>
         </div>
@@ -182,7 +190,8 @@ function App() {
               {route.tab === 'students' && <StudentsTab />}
               {route.tab === 'learning' && <LearningTab />}
               {route.tab === 'network' && <NetworkTab />}
-              {route.tab === 'accounts' && <AccountsTab />}
+              {route.tab === 'email-domains' && <EmailDomainsTab />}
+              {route.tab === 'profile' && <MyAccountTab />}
             </>
           )}
         </div>