feat: optimize tenant admin view and enhance user list with dynamic columns and metadata search

adminfront/src/components/auth/RoleGuard.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { fetchMe } from "../../lib/adminApi";
+
+interface RoleGuardProps {
+  children: React.ReactNode;
+  roles: string[];
+  fallback?: React.ReactNode;
+}
+
+/**
+ * RoleGuard conditionally renders children based on the current user's role.
+ * 
+ * Usage:
+ * <RoleGuard roles={['super_admin']}>
+ *   <button>System Only Action</button>
+ * </RoleGuard>
+ */
+export function RoleGuard({ children, roles, fallback = null }: RoleGuardProps) {
+  const { data: profile, isLoading } = useQuery({
+    queryKey: ["me"],
+    queryFn: fetchMe,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  if (isLoading) return null;
+
+  const userRole = profile?.role || "user";
+  const hasAccess = roles.includes(userRole);
+
+  if (!hasAccess) {
+    return <>{fallback}</>;
+  }
+
+  return <>{children}</>;
+}

adminfront/src/components/layout/AppLayout.tsx

@@ -22,18 +22,14 @@ import { t } from "../../lib/i18n";
 import LanguageSelector from "../common/LanguageSelector";
 import RoleSwitcher from "./RoleSwitcher";
 
-const navItems = [
+const staticNavItems = [
   { label: "ui.admin.nav.overview", to: "/", icon: LayoutDashboard },
-  {
-    label: "ui.admin.nav.tenants",
-    to: "/tenants",
-    icon: Building2,
-  },
   { label: "ui.admin.nav.users", to: "/users", icon: Users },
   { label: "ui.admin.nav.api_keys", to: "/api-keys", icon: Key },
   { label: "ui.admin.nav.audit_logs", to: "/audit-logs", icon: NotebookTabs },
   { label: "ui.admin.nav.auth_guard", to: "/auth", icon: KeyRound },
 ];
+
 function AppLayout() {
   const auth = useAuth();
   const navigate = useNavigate();
@@ -49,6 +45,32 @@ function AppLayout() {
     enabled: auth.isAuthenticated && !auth.isLoading,
   });
 
+  const navItems = React.useMemo(() => {
+    const items = [...staticNavItems];
+    const isSuperAdmin = profile?.role === "super_admin";
+    const isTenantAdmin = profile?.role === "tenant_admin";
+
+    if (isSuperAdmin) {
+      // Insert Tenants at index 1 for Super Admin
+      items.splice(1, 0, {
+        label: "ui.admin.nav.tenants",
+        to: "/tenants",
+        icon: Building2,
+      });
+    } else if (isTenantAdmin && profile?.tenantId) {
+      // Insert My Tenant link for Tenant Admin
+      items.splice(1, 0, {
+        label: "ui.admin.nav.my_tenant",
+        to: `/tenants/${profile.tenantId}`,
+        icon: Building2,
+      });
+    }
+
+    // Tenant Admin should not see global API keys or global audit logs (unless allowed)
+    // For now, let's keep them but they might return 403
+    return items;
+  }, [profile]);
+
   const handleLogout = () => {
     if (
       window.confirm(t("msg.admin.logout_confirm", "로그아웃 하시겠습니까?"))