first commit

components/AccountAdminShell.tsx

@@ -0,0 +1,51 @@
+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?.user_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;