clean ui

management/src/components/AccountsTab.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useAuth } from '../auth/AuthContext';
-import { apiAdmin, type EmailDomainItem } from '../api';
 import { useGitHubConnection } from '../hooks/useGitHubConnection';
 import { GitHubReposPanel } from './GitHubReposPanel';
+import { OrganizationSection } from './OrganizationSection';
 
 export function ChangePasswordPage({ forced }: { forced?: boolean }) {
   const { changePassword, logout } = useAuth();
@@ -67,62 +67,12 @@ export function ChangePasswordPage({ forced }: { forced?: boolean }) {
 }
 
 export function EmailDomainsTab() {
-  const [domains, setDomains] = useState<EmailDomainItem[]>([]);
-  const [newDomain, setNewDomain] = useState('');
-
-  const load = async () => {
-    const res = await apiAdmin.listEmailDomains();
-    setDomains(res.data);
-  };
-
-  useEffect(() => {
-    load().catch(console.error);
-  }, []);
-
-  const addDomain = async () => {
-    if (!newDomain.trim()) return;
-    await apiAdmin.addEmailDomain(newDomain.trim());
-    setNewDomain('');
-    await load();
-  };
-
-  const removeDomain = async (id: number) => {
-    if (!confirm('Xóa đuôi email này?')) return;
-    await apiAdmin.deleteEmailDomain(id);
-    await load();
-  };
-
   return (
-    <div className="page-stack">
+    <div className="tab-page">
       <header className="page-header">
-        <h1 className="page-title">Đuôi email</h1>
-        <p className="page-desc">Cấu hình đuôi email được phép đăng ký và đăng nhập.</p>
+        <h1 className="page-title">Quản lý tổ chức</h1>
       </header>
-
-      <div className="card" style={{ padding: '1.25rem' }}>
-        <h2 className="section-title">Đuôi email được phép</h2>
-        <p className="page-desc" style={{ marginTop: 0 }}>
-          Nếu chưa có bản ghi nào, hệ thống chấp nhận mọi đuôi email. Thêm đuôi để giới hạn truy cập.
-        </p>
-        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
-          <input
-            placeholder="vd: rikkeiacademy.com"
-            value={newDomain}
-            onChange={(e) => setNewDomain(e.target.value)}
-            style={{ flex: 1 }}
-          />
-          <button type="button" className="btn btn-primary" onClick={addDomain}>Thêm</button>
-        </div>
-        <ul className="domain-list">
-          {domains.length === 0 && <li className="domain-empty">Chưa cấu hình — chấp nhận tất cả đuôi email</li>}
-          {domains.map((d) => (
-            <li key={d.id} className="domain-item">
-              <span>@{d.domain}</span>
-              <button type="button" className="btn btn-ghost btn-sm" onClick={() => removeDomain(d.id)}>Xóa</button>
-            </li>
-          ))}
-        </ul>
-      </div>
+      <OrganizationSection />
     </div>
   );
 }