clean ui

2026-06-30 15:53:01 +07:00
parent 595aebd8a5
commit 74b540cac2
19 changed files with 1719 additions and 252 deletions
--- a/management/src/components/SystemTab.tsx
+++ b/management/src/components/SystemTab.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import {
+  navigateSystem,
+  parseRoute,
+  SYSTEM_SECTION_LABELS,
+  type SystemSection,
+} from '../navigation';
+import { OrganizationSection } from './OrganizationSection';
+import { NetworkSection } from './NetworkSection';
+import { AppTemplatesSection } from './AppTemplatesSection';
+
+const SECTIONS: { id: SystemSection; icon: React.ReactNode; hint: string }[] = [
+  {
+    id: 'organization',
+    hint: 'Đuôi email & tổ chức',
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 21h18" /><path d="M5 21V7l8-4v18" /><path d="M19 21V11l-6-4" />
+      </svg>
+    ),
+  },
+  {
+    id: 'network',
+    hint: 'WiFi được phép',
+    icon: (
+      <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" />
+        <path d="M1.42 9a16 16 0 0 1 21.16 0" />
+        <circle cx="12" cy="20" r="1" />
+      </svg>
+    ),
+  },
+  {
+    id: 'templates',
+    hint: 'Bộ keyword app',
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <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="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
+      </svg>
+    ),
+  },
+];
+
+export const SystemTab: React.FC = () => {
+  const [section, setSection] = useState<SystemSection>(() => parseRoute().systemSection);
+
+  useEffect(() => {
+    const sync = () => setSection(parseRoute().systemSection);
+    window.addEventListener('popstate', sync);
+    return () => window.removeEventListener('popstate', sync);
+  }, []);
+
+  const selectSection = (id: SystemSection) => {
+    setSection(id);
+    navigateSystem(id);
+  };
+
+  return (
+    <div className="tab-page system-page">
+      <header className="page-header">
+        <h1 className="page-title">Quản lý hệ thống</h1>
+        <p className="page-desc">
+          Cấu hình tổ chức, mạng WiFi và khung ứng dụng dùng chung cho toàn hệ thống.
+        </p>
+      </header>
+
+      <nav className="system-subnav" aria-label="Mục hệ thống">
+        {SECTIONS.map((s) => (
+          <button
+            key={s.id}
+            type="button"
+            className={`system-subnav-btn ${section === s.id ? 'active' : ''}`}
+            onClick={() => selectSection(s.id)}
+          >
+            <span className="system-subnav-icon">{s.icon}</span>
+            <span className="system-subnav-text">
+              <strong>{SYSTEM_SECTION_LABELS[s.id]}</strong>
+              <small>{s.hint}</small>
+            </span>
+          </button>
+        ))}
+      </nav>
+
+      <div className="system-panel">
+        {section === 'organization' && <OrganizationSection />}
+        {section === 'network' && <NetworkSection />}
+        {section === 'templates' && <AppTemplatesSection />}
+      </div>
+    </div>
+  );
+};