93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
};
|