58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { useState } from 'react'
|
|
import RoleManagement from './RoleManagement'
|
|
import RoleMenuManagement from './RoleMenuManagement'
|
|
import CodeManagement from './CodeManagement'
|
|
import MenuManagement from './MenuManagement'
|
|
import DeptManagement from './DeptManagement'
|
|
import CompanyManagement from './CompanyManagement'
|
|
|
|
/*
|
|
* 시스템관리(권한) — UIWS system 모듈 이식 화면 셸(탭 컨테이너).
|
|
* 단일 라우트 /system 에서 6개 관리화면을 탭으로 전환. 색상은 var(--uiws-*) 토큰만 사용(다크/라이트 정합).
|
|
* 백엔드: com.zioinfo.hrm.uiws.system (/api/system/*). 조회 SUPERADMIN/MANAGER, 쓰기 SUPERADMIN.
|
|
*/
|
|
|
|
type TabKey = 'roles' | 'role-menus' | 'codes' | 'menus' | 'depts' | 'companies'
|
|
|
|
const TABS: { key: TabKey; label: string }[] = [
|
|
{ key: 'roles', label: '권한 관리' },
|
|
{ key: 'role-menus', label: '역할-메뉴 권한' },
|
|
{ key: 'codes', label: '공통코드' },
|
|
{ key: 'menus', label: '메뉴 관리' },
|
|
{ key: 'depts', label: '부서 관리' },
|
|
{ key: 'companies', label: '거래처 관리' },
|
|
]
|
|
|
|
export default function SystemPage() {
|
|
const [tab, setTab] = useState<TabKey>('roles')
|
|
|
|
return (
|
|
<div className="uiws-scope">
|
|
<div style={{
|
|
display: 'flex', gap: 4, marginBottom: 20, flexWrap: 'wrap',
|
|
borderBottom: '1px solid var(--uiws-border)',
|
|
}}>
|
|
{TABS.map(t => (
|
|
<button key={t.key} onClick={() => setTab(t.key)}
|
|
style={{
|
|
padding: '10px 16px', fontSize: 13, fontWeight: 600, cursor: 'pointer',
|
|
background: 'transparent', border: 'none',
|
|
color: tab === t.key ? 'var(--uiws-primary)' : 'var(--uiws-text-muted)',
|
|
borderBottom: `2px solid ${tab === t.key ? 'var(--uiws-primary)' : 'transparent'}`,
|
|
marginBottom: -1,
|
|
}}>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{tab === 'roles' && <RoleManagement />}
|
|
{tab === 'role-menus' && <RoleMenuManagement />}
|
|
{tab === 'codes' && <CodeManagement />}
|
|
{tab === 'menus' && <MenuManagement />}
|
|
{tab === 'depts' && <DeptManagement />}
|
|
{tab === 'companies' && <CompanyManagement />}
|
|
</div>
|
|
)
|
|
}
|