design-system/src/pages/Admin/UserManagement/UserManagement.tsx

import { useState } from 'react'
import styles from './UserManagement.module.css'
import { AdminLayout } from '../Admin'
import { Tabs } from '../../../design-system/composites/Tabs/Tabs'
import { UsersTab } from './UsersTab'
import { GroupsTab } from './GroupsTab'
import { RolesTab } from './RolesTab'

const TABS = [
  { label: 'Users', value: 'users' },
  { label: 'Groups', value: 'groups' },
  { label: 'Roles', value: 'roles' },
]

export function UserManagement() {
  const [tab, setTab] = useState('users')

  return (
    <AdminLayout title="User Management">
      <Tabs tabs={TABS} active={tab} onChange={setTab} />
      <div className={styles.tabContent}>
        {tab === 'users' && <UsersTab />}
        {tab === 'groups' && <GroupsTab />}
        {tab === 'roles' && <RolesTab />}
      </div>
    </AdminLayout>
  )
}