52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { useAuth } from '../context/AuthContext.tsx';
|
|
import UserManagementPage from './UserManagementPage.tsx';
|
|
|
|
const AccountAdminShell: React.FC = () => {
|
|
const { user, logout } = useAuth();
|
|
const roleLabel = user?.is_superuser ? 'Superuser' : 'Account Admin';
|
|
|
|
return (
|
|
<div className="flex h-screen bg-gray-100">
|
|
<aside className="flex flex-col w-64 bg-white border-r border-gray-200 z-20">
|
|
<div className="flex items-center h-16 border-b border-gray-200 px-4">
|
|
<img
|
|
src="/favicon.png"
|
|
alt="Logo Charoen Pokphand"
|
|
className="object-contain h-10"
|
|
/>
|
|
</div>
|
|
<nav className="flex-grow p-2">
|
|
<ul className="space-y-1">
|
|
<li>
|
|
<div className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium bg-red-50 text-red-700">
|
|
<i className="fa-solid fa-users" aria-hidden />
|
|
Manajemen Akun
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div className="border-t border-gray-200 p-4 space-y-2">
|
|
<p className="text-xs text-gray-500 truncate">
|
|
{user?.display_name} · {roleLabel}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => void logout()}
|
|
className="w-full rounded-md border border-gray-300 text-sm px-3 py-2 hover:bg-gray-50"
|
|
>
|
|
Keluar
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<div className="flex-1 overflow-x-hidden overflow-y-auto">
|
|
<div className="px-4 sm:px-6 lg:px-8 pt-4 sm:pt-6 lg:pt-8 pb-8">
|
|
<UserManagementPage />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AccountAdminShell;
|