52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { UserShieldIcon } from './icons/Icons';
|
|
import UserTab from './access/UserTab';
|
|
import RoleTab from './access/RoleTab';
|
|
|
|
type ActiveTab = 'users' | 'roles';
|
|
|
|
const UserManagementPage: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState<ActiveTab>('users');
|
|
|
|
const TabButton: React.FC<{ tabName: ActiveTab; label: string }> = ({ tabName, label }) => (
|
|
<button
|
|
onClick={() => setActiveTab(tabName)}
|
|
className={`px-4 py-2 text-sm font-semibold rounded-t-lg transition-colors ${
|
|
activeTab === tabName
|
|
? 'bg-white text-red-600 border-b-2 border-red-600'
|
|
: 'text-gray-500 hover:text-gray-700'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8">
|
|
<div className="flex items-center mb-6">
|
|
<UserShieldIcon className="text-3xl text-red-600 mr-4" />
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-800">Manajemen Pengguna & Akses</h1>
|
|
<p className="mt-1 text-gray-600">
|
|
Kelola pengguna, grup, dan hak akses (role-based access control).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-b border-gray-200">
|
|
<nav className="-mb-px flex space-x-6" aria-label="Tabs">
|
|
<TabButton tabName="users" label="Manajemen Pengguna" />
|
|
<TabButton tabName="roles" label="Manajemen Peran & Hak Akses" />
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
{activeTab === 'users' && <UserTab />}
|
|
{activeTab === 'roles' && <RoleTab />}
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default UserManagementPage;
|