@hed-hog/core 0.0.302 → 0.0.304

package/hedhog/frontend/app/menu/page.tsx.ejs

@@ -6,7 +6,6 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
-  StatsCards,
 } from '@/components/entity-list';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import {
@@ -23,17 +22,25 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Card,
+  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer';
 import {
   Form,
   FormControl,
@@ -43,7 +50,14 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Label } from '@/components/ui/label';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Select,
   SelectContent,
@@ -60,19 +74,44 @@ import {
 } from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  BadgeHelp,
+  BookOpen,
+  Building2,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  FileText,
+  FolderPlus,
   GitBranch,
+  GripVertical,
+  House,
+  LayoutDashboard,
   Link,
   Loader2,
   Menu,
+  PanelLeftOpen,
   Plus,
+  RefreshCcw,
+  Settings,
   ShieldCheck,
+  Tag,
+  Ticket,
   Trash2,
+  Users,
+  Wallet,
+  type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
@@ -89,11 +128,18 @@ type RoleLocale = {
   description?: string;
 };
 
+type RoleAccessUser = {
+  id: number;
+  name?: string | null;
+  user_identifier?: Array<{ value: string }>;
+};
+
 type RoleItem = {
   id: number;
   name?: string;
   role_locale?: RoleLocale[];
   role_menu?: Array<{ role_id: number; menu_id: number }>;
+  role_user?: Array<{ user_id: number; user: RoleAccessUser }>;
 };
 
 type MenuRolesSectionProps = {
@@ -121,10 +167,7 @@ function MenuRolesSection({ menuId }: MenuRolesSectionProps) {
     enabled: !!menuId,
   });
 
-  const roles = rolesData?.data ?? [];
-
-  const isRoleAssigned = (role: RoleItem) =>
-    !!(role.role_menu && role.role_menu.length > 0);
+  const roles = useMemo(() => rolesData?.data ?? [], [rolesData?.data]);
 
   const getRoleName = (role: RoleItem) =>
     role.role_locale?.[0]?.name ?? role.name ?? String(role.id);
@@ -132,12 +175,61 @@ function MenuRolesSection({ menuId }: MenuRolesSectionProps) {
   const getRoleDescription = (role: RoleItem) =>
     role.role_locale?.[0]?.description ?? '';
 
+  const getRoleUserCount = (role: RoleItem) => role.role_user?.length ?? 0;
+
+  const assignedRoles = useMemo(
+    () => roles.filter((role) => Boolean(role.role_menu?.length)),
+    [roles]
+  );
+
+  const accessPreviewUsers = useMemo(() => {
+    const previewMap = new Map<
+      number,
+      { id: number; name: string; email: string | null; roles: string[] }
+    >();
+
+    assignedRoles.forEach((role) => {
+      const roleLabel =
+        role.role_locale?.[0]?.name ?? role.name ?? String(role.id);
+
+      role.role_user?.forEach((roleUser) => {
+        const user = roleUser.user;
+
+        if (!user) {
+          return;
+        }
+
+        const email = user.user_identifier?.[0]?.value ?? null;
+        const name = user.name?.trim() || email || `#${user.id}`;
+        const existing = previewMap.get(user.id) ?? {
+          id: user.id,
+          name,
+          email,
+          roles: [],
+        };
+
+        if (!existing.roles.includes(roleLabel)) {
+          existing.roles.push(roleLabel);
+        }
+
+        previewMap.set(user.id, existing);
+      });
+    });
+
+    return Array.from(previewMap.values()).sort((left, right) =>
+      left.name.localeCompare(right.name)
+    );
+  }, [assignedRoles]);
+
+  const previewUsers = accessPreviewUsers.slice(0, 6);
+
   const handleToggle = async (roleId: number, currentlyAssigned: boolean) => {
     setTogglingRoleId(roleId);
+
     try {
       const currentIds = roles
-        .filter((r) => isRoleAssigned(r))
-        .map((r) => r.id);
+        .filter((role) => Boolean(role.role_menu?.length))
+        .map((role) => role.id);
 
       const newIds = currentlyAssigned
         ? currentIds.filter((id) => id !== roleId)
@@ -171,67 +263,83 @@ function MenuRolesSection({ menuId }: MenuRolesSectionProps) {
 
   if (!roles.length) {
     return (
-      <div className="border border-dashed rounded-lg p-8 flex flex-col items-center justify-center">
-        <ShieldCheck className="h-10 w-10 text-muted-foreground mb-3" />
-        <p className="text-sm font-medium text-center text-muted-foreground">
-          {t('noRolesFound')}
-        </p>
-      </div>
+      <EmptyState
+        className="min-h-60 py-10"
+        icon={<ShieldCheck className="h-10 w-10" />}
+        title={t('noRolesFound')}
+        description={t('rolesDescription')}
+      />
     );
   }
 
   return (
     <div className="space-y-3">
       <div>
-        <h4 className="text-sm font-semibold flex items-center gap-2">
+        <h4 className="flex items-center gap-2 text-sm font-semibold">
           <ShieldCheck className="h-4 w-4" />
           {t('rolesTitle')}
         </h4>
-        <p className="text-xs text-muted-foreground mt-1">
+        <p className="mt-0.5 text-xs text-muted-foreground">
           {t('rolesDescription')}
         </p>
       </div>
 
-      <div className="space-y-2">
+      <div className="space-y-1.5">
         {roles.map((role) => {
-          const assigned = isRoleAssigned(role);
+          const assigned = Boolean(role.role_menu?.length);
           const toggling = togglingRoleId === role.id;
+          const linkedUsers = getRoleUserCount(role);
 
           return (
             <div
               key={role.id}
-              className={`flex items-center justify-between p-3 rounded-md border transition-all ${
+              className={cn(
+                'flex items-center justify-between rounded-lg border p-2.5 transition-all duration-150 hover:shadow-sm active:scale-[0.99]',
                 assigned
                   ? 'border-primary/50 bg-primary/5'
                   : 'border-border hover:border-primary/30'
-              }`}
+              )}
             >
-              <div className="flex items-center gap-3 flex-1 min-w-0">
+              <div className="flex min-w-0 flex-1 items-center gap-2.5">
                 <div
-                  className={`rounded-md p-2 shrink-0 ${
+                  className={cn(
+                    'shrink-0 rounded-md p-1.5',
                     assigned ? 'bg-primary/10' : 'bg-muted'
-                  }`}
+                  )}
                 >
                   <ShieldCheck
-                    className={`h-4 w-4 ${
+                    className={cn(
+                      'h-4 w-4',
                       assigned ? 'text-primary' : 'text-muted-foreground'
-                    }`}
+                    )}
                   />
                 </div>
-                <div className="flex-1 min-w-0">
-                  <Label
-                    htmlFor={`role-${role.id}`}
-                    className="text-sm font-medium cursor-pointer"
-                  >
-                    {getRoleName(role)}
-                  </Label>
-                  {getRoleDescription(role) && (
-                    <p className="text-xs text-muted-foreground mt-0.5 truncate">
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <Label
+                      htmlFor={`role-${role.id}`}
+                      className="cursor-pointer text-sm font-medium"
+                    >
+                      {getRoleName(role)}
+                    </Label>
+                    <TooltipBadge
+                      tooltip={`${t('usersWithAccessTitle')}: ${linkedUsers}`}
+                      variant="outline"
+                      className="rounded-full px-1.5 py-0 text-[10px]"
+                    >
+                      <Users className="mr-1 h-3 w-3" />
+                      {linkedUsers}
+                    </TooltipBadge>
+                  </div>
+                  {getRoleDescription(role) ? (
+                    <p className="mt-0.5 truncate text-xs text-muted-foreground">
                       {getRoleDescription(role)}
                     </p>
-                  )}
+                  ) : null}
                 </div>
               </div>
+
               <Switch
                 id={`role-${role.id}`}
                 checked={assigned}
@@ -243,6 +351,92 @@ function MenuRolesSection({ menuId }: MenuRolesSectionProps) {
           );
         })}
       </div>
+
+      <div className="rounded-xl border bg-muted/20 p-3">
+        <div className="flex items-start justify-between gap-2">
+          <div>
+            <h5 className="flex items-center gap-2 text-sm font-semibold">
+              <Users className="h-4 w-4" />
+              {t('usersWithAccessTitle')}
+            </h5>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              {t('usersWithAccessDescription')}
+            </p>
+          </div>
+
+          <TooltipBadge
+            tooltip={`${t('usersWithAccessTitle')}: ${accessPreviewUsers.length}`}
+            variant="secondary"
+            className="rounded-full px-2 py-0.5"
+          >
+            {accessPreviewUsers.length}
+          </TooltipBadge>
+        </div>
+
+        {!assignedRoles.length ? (
+          <p className="mt-3 text-xs text-muted-foreground">
+            {t('noAssignedRolesPreview')}
+          </p>
+        ) : !accessPreviewUsers.length ? (
+          <p className="mt-3 text-xs text-muted-foreground">
+            {t('noUsersWithAccess')}
+          </p>
+        ) : (
+          <div className="mt-3 space-y-2">
+            {previewUsers.map((user) => (
+              <div
+                key={user.id}
+                className="rounded-lg border bg-background/80 p-2.5"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">{user.name}</p>
+                    {user.email ? (
+                      <p className="truncate text-xs text-muted-foreground">
+                        {user.email}
+                      </p>
+                    ) : null}
+                  </div>
+
+                  <TooltipBadge
+                    tooltip={`${t('grantedByRole')}: ${user.roles.length}`}
+                    variant="outline"
+                    className="rounded-full px-2 py-0 text-[10px]"
+                  >
+                    {user.roles.length}
+                  </TooltipBadge>
+                </div>
+
+                <div className="mt-2">
+                  <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                    {t('grantedByRole')}
+                  </p>
+                  <div className="mt-1 flex flex-wrap gap-1">
+                    {user.roles.map((roleLabel) => (
+                      <TooltipBadge
+                        key={`${user.id}-${roleLabel}`}
+                        tooltip={roleLabel}
+                        variant="secondary"
+                        className="rounded-full px-2 py-0 text-[10px]"
+                      >
+                        {roleLabel}
+                      </TooltipBadge>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            {accessPreviewUsers.length > previewUsers.length ? (
+              <p className="text-xs text-muted-foreground">
+                {t('moreUsers', {
+                  count: accessPreviewUsers.length - previewUsers.length,
+                })}
+              </p>
+            ) : null}
+          </div>
+        )}
+      </div>
     </div>
   );
 }
@@ -256,16 +450,10 @@ type TreeNode = {
   order: number | null;
   name?: string;
   menu_locale?: Array<{ name?: string; locale?: { code: string } }>;
+  _count?: { role_menu?: number };
   children: TreeNode[];
 };
 
-type MenuTreeDialogProps = {
-  open: boolean;
-  onClose: () => void;
-  menus: TreeNode[];
-  onSaved: () => void;
-};
-
 type DropPosition = 'before' | 'inside' | 'after';
 
 type DropTarget = {
@@ -276,8 +464,10 @@ type DropTarget = {
 
 function buildTree(flat: TreeNode[]): TreeNode[] {
   const map = new Map<number, TreeNode>();
-  flat.forEach((m) => map.set(m.id, { ...m, children: [] }));
+  flat.forEach((menu) => map.set(menu.id, { ...menu, children: [] }));
+
   const roots: TreeNode[] = [];
+
   map.forEach((node) => {
     if (node.menu_id != null && map.has(node.menu_id)) {
       map.get(node.menu_id)!.children.push(node);
@@ -285,10 +475,12 @@ function buildTree(flat: TreeNode[]): TreeNode[] {
       roots.push(node);
     }
   });
-  const sortByOrder = (arr: TreeNode[]): TreeNode[] =>
-    arr
+
+  const sortByOrder = (nodes: TreeNode[]): TreeNode[] =>
+    nodes
       .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
-      .map((n) => ({ ...n, children: sortByOrder(n.children) }));
+      .map((node) => ({ ...node, children: sortByOrder(node.children) }));
+
   return sortByOrder(roots);
 }
 
@@ -297,16 +489,23 @@ function removeNodeFromTree(
   id: number
 ): { tree: TreeNode[]; removed: TreeNode | null } {
   let removed: TreeNode | null = null;
-  const process = (arr: TreeNode[]): TreeNode[] => {
-    const filtered = arr.filter((n) => {
-      if (n.id === id) {
-        removed = n;
+
+  const process = (items: TreeNode[]): TreeNode[] => {
+    const filtered = items.filter((node) => {
+      if (node.id === id) {
+        removed = node;
         return false;
       }
+
       return true;
     });
-    return filtered.map((n) => ({ ...n, children: process(n.children) }));
+
+    return filtered.map((node) => ({
+      ...node,
+      children: process(node.children),
+    }));
   };
+
   return { tree: process(nodes), removed };
 }
 
@@ -317,27 +516,33 @@ function insertIntoTree(
   position: DropPosition
 ): TreeNode[] {
   if (position === 'inside') {
-    return nodes.map((n) => {
-      if (n.id === targetId) {
-        return { ...n, children: [...n.children, node] };
+    return nodes.map((item) => {
+      if (item.id === targetId) {
+        return { ...item, children: [...item.children, node] };
       }
+
       return {
-        ...n,
-        children: insertIntoTree(n.children, node, targetId, position),
+        ...item,
+        children: insertIntoTree(item.children, node, targetId, position),
       };
     });
   }
 
-  const idx = nodes.findIndex((n) => n.id === targetId);
-  if (idx !== -1) {
+  const targetIndex = nodes.findIndex((item) => item.id === targetId);
+
+  if (targetIndex !== -1) {
     const result = [...nodes];
-    result.splice(position === 'before' ? idx : idx + 1, 0, node);
+    result.splice(
+      position === 'before' ? targetIndex : targetIndex + 1,
+      0,
+      node
+    );
     return result;
   }
 
-  return nodes.map((n) => ({
-    ...n,
-    children: insertIntoTree(n.children, node, targetId, position),
+  return nodes.map((item) => ({
+    ...item,
+    children: insertIntoTree(item.children, node, targetId, position),
   }));
 }
 
@@ -346,39 +551,245 @@ function isDescendantOf(
   ancestorId: number,
   candidateId: number
 ): boolean {
-  const findAncestor = (arr: TreeNode[]): TreeNode | null => {
-    for (const n of arr) {
-      if (n.id === ancestorId) return n;
-      const found = findAncestor(n.children);
-      if (found) return found;
+  const findAncestor = (items: TreeNode[]): TreeNode | null => {
+    for (const node of items) {
+      if (node.id === ancestorId) {
+        return node;
+      }
+
+      const found = findAncestor(node.children);
+      if (found) {
+        return found;
+      }
     }
+
     return null;
   };
+
   const ancestor = findAncestor(nodes);
-  if (!ancestor) return false;
-  const searchInChildren = (children: TreeNode[]): boolean =>
-    children.some((c) => c.id === candidateId || searchInChildren(c.children));
-  return searchInChildren(ancestor.children);
+
+  if (!ancestor) {
+    return false;
+  }
+
+  const searchChildren = (items: TreeNode[]): boolean =>
+    items.some(
+      (node) => node.id === candidateId || searchChildren(node.children)
+    );
+
+  return searchChildren(ancestor.children);
 }
 
 function collectOrderGroups(nodes: TreeNode[]): { ids: number[] }[] {
   const groups: { ids: number[] }[] = [];
+
   const traverse = (siblings: TreeNode[]) => {
     if (siblings.length > 0) {
-      groups.push({ ids: siblings.map((n) => n.id) });
-      siblings.forEach((n) => traverse(n.children));
+      groups.push({ ids: siblings.map((node) => node.id) });
+      siblings.forEach((node) => traverse(node.children));
     }
   };
+
   traverse(nodes);
   return groups;
 }
 
-function MenuTreeDialog({
-  open,
-  onClose,
+function collectExpandableIds(nodes: TreeNode[]): number[] {
+  const ids: number[] = [];
+
+  const traverse = (items: TreeNode[]) => {
+    items.forEach((node) => {
+      if (node.children.length > 0) {
+        ids.push(node.id);
+        traverse(node.children);
+      }
+    });
+  };
+
+  traverse(nodes);
+  return ids;
+}
+
+function filterTreeNodes(nodes: TreeNode[], query: string): TreeNode[] {
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (!normalizedQuery) {
+    return nodes;
+  }
+
+  return nodes.flatMap((node) => {
+    const filteredChildren = filterTreeNodes(node.children, query);
+    const label = node.menu_locale?.[0]?.name ?? node.name ?? node.slug;
+    const matches = [label, node.slug, node.url]
+      .filter(Boolean)
+      .some((value) => value!.toLowerCase().includes(normalizedQuery));
+
+    if (!matches && filteredChildren.length === 0) {
+      return [];
+    }
+
+    return [{ ...node, children: filteredChildren }];
+  });
+}
+
+function getDescendantIds(menus: MenuItem[], parentId: number): number[] {
+  const descendants: number[] = [];
+  const stack = menus
+    .filter((menu) => menu.menu_id === parentId)
+    .map((menu) => menu.id);
+
+  while (stack.length > 0) {
+    const currentId = stack.pop();
+
+    if (currentId == null) {
+      continue;
+    }
+
+    descendants.push(currentId);
+
+    menus
+      .filter((menu) => menu.menu_id === currentId)
+      .forEach((menu) => stack.push(menu.id));
+  }
+
+  return descendants;
+}
+
+function getMenuRoleCount(
+  menu: Pick<MenuItem, '_count'> | Pick<TreeNode, '_count'>
+) {
+  return menu._count?.role_menu ?? 0;
+}
+
+type MenuVisualConfig = {
+  Icon: LucideIcon;
+  iconWrapperClassName: string;
+  iconClassName: string;
+};
+
+function getMenuVisual(menu: {
+  slug: string;
+  url: string;
+  name?: string;
+  icon?: string | null;
+}): MenuVisualConfig {
+  const lookup =
+    `${menu.slug} ${menu.url} ${menu.name ?? ''} ${menu.icon ?? ''}`.toLowerCase();
+
+  if (/(dashboard|painel|home|inicio)/.test(lookup)) {
+    return {
+      Icon: LayoutDashboard,
+      iconWrapperClassName: 'bg-blue-50',
+      iconClassName: 'text-blue-600',
+    };
+  }
+
+  if (/(user|usuario|account|conta|contact|cliente|cargo|role)/.test(lookup)) {
+    return {
+      Icon: Users,
+      iconWrapperClassName: 'bg-violet-50',
+      iconClassName: 'text-violet-600',
+    };
+  }
+
+  if (/(config|setting|admin|security|permission)/.test(lookup)) {
+    return {
+      Icon: Settings,
+      iconWrapperClassName: 'bg-slate-100',
+      iconClassName: 'text-slate-700',
+    };
+  }
+
+  if (
+    /(finance|billing|payment|bank|cash|invoice|transfer|credit|debit)/.test(
+      lookup
+    )
+  ) {
+    return {
+      Icon: Wallet,
+      iconWrapperClassName: 'bg-emerald-50',
+      iconClassName: 'text-emerald-600',
+    };
+  }
+
+  if (/(faq|help|support|ajuda)/.test(lookup)) {
+    return {
+      Icon: BadgeHelp,
+      iconWrapperClassName: 'bg-amber-50',
+      iconClassName: 'text-amber-600',
+    };
+  }
+
+  if (/(ticket|chamado|suporte)/.test(lookup)) {
+    return {
+      Icon: Ticket,
+      iconWrapperClassName: 'bg-rose-50',
+      iconClassName: 'text-rose-600',
+    };
+  }
+
+  if (/(blog|content|post|article|template|email|report|doc)/.test(lookup)) {
+    return {
+      Icon: FileText,
+      iconWrapperClassName: 'bg-cyan-50',
+      iconClassName: 'text-cyan-600',
+    };
+  }
+
+  if (/(course|lesson|lms|class|academy)/.test(lookup)) {
+    return {
+      Icon: BookOpen,
+      iconWrapperClassName: 'bg-indigo-50',
+      iconClassName: 'text-indigo-600',
+    };
+  }
+
+  if (/(tag|label|category|catalog)/.test(lookup)) {
+    return {
+      Icon: Tag,
+      iconWrapperClassName: 'bg-fuchsia-50',
+      iconClassName: 'text-fuchsia-600',
+    };
+  }
+
+  if (/(company|business|operation|studio|workspace)/.test(lookup)) {
+    return {
+      Icon: Building2,
+      iconWrapperClassName: 'bg-orange-50',
+      iconClassName: 'text-orange-600',
+    };
+  }
+
+  return {
+    Icon: Menu,
+    iconWrapperClassName: 'bg-muted',
+    iconClassName: 'text-muted-foreground',
+  };
+}
+
+type MenuTreeWorkspaceProps = {
+  menus: TreeNode[];
+  searchQuery: string;
+  selectedId: number | null;
+  onSelect: (menuId: number) => void | Promise<void>;
+  onSaved: () => void | Promise<void>;
+  onAddSubmenu: (menuId: number) => void | Promise<void>;
+  onDuplicate: (menuId: number) => void | Promise<void>;
+  onDelete: (menuId: number) => void | Promise<void>;
+  onMoveToRoot: (menuId: number) => void | Promise<void>;
+};
+
+function MenuTreeWorkspace({
   menus,
+  searchQuery,
+  selectedId,
+  onSelect,
   onSaved,
-}: MenuTreeDialogProps) {
+  onAddSubmenu,
+  onDuplicate,
+  onDelete,
+  onMoveToRoot,
+}: MenuTreeWorkspaceProps) {
   const t = useTranslations('core.MenuPage');
   const { request } = useApp();
 
@@ -389,16 +800,36 @@ function MenuTreeDialog({
     parentId: number | null;
   } | null>(null);
   const [dropTarget, setDropTarget] = useState<DropTarget>(null);
+  const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
 
   useEffect(() => {
-    if (open) {
-      setTree(buildTree(menus as TreeNode[]));
-    }
-  }, [open, menus]);
+    const nextTree = buildTree(menus as TreeNode[]);
+    setTree(nextTree);
+    setExpandedIds(new Set(collectExpandableIds(nextTree)));
+  }, [menus]);
+
+  const filteredTree = useMemo(
+    () => filterTreeNodes(tree, searchQuery),
+    [searchQuery, tree]
+  );
 
   const getDisplayName = (node: TreeNode) =>
     node.menu_locale?.[0]?.name ?? node.name ?? node.slug;
 
+  const toggleExpanded = (id: number) => {
+    setExpandedIds((previous) => {
+      const next = new Set(previous);
+
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+
+      return next;
+    });
+  };
+
   const handleDrop = async (target: DropTarget) => {
     if (!target || !dragging || dragging.id === target.id) {
       setDragging(null);
@@ -420,10 +851,11 @@ function MenuTreeDialog({
     const oldParentId = dragging.parentId;
     const draggedId = dragging.id;
 
-    const { tree: treeWithout, removed } = removeNodeFromTree(
+    const { tree: treeWithoutNode, removed } = removeNodeFromTree(
       tree,
       dragging.id
     );
+
     if (!removed) {
       setDragging(null);
       setDropTarget(null);
@@ -431,16 +863,18 @@ function MenuTreeDialog({
     }
 
     const newTree = insertIntoTree(
-      treeWithout,
+      treeWithoutNode,
       removed,
       target.id,
       target.position
     );
+
     setTree(newTree);
     setDragging(null);
     setDropTarget(null);
 
     setSaving(true);
+
     try {
       if (oldParentId !== newParentId) {
         await request({
@@ -462,7 +896,7 @@ function MenuTreeDialog({
       );
 
       toast.success(t('treeOrderSaved'));
-      onSaved();
+      await onSaved();
     } catch {
       toast.error(t('treeOrderError'));
       setTree(buildTree(menus as TreeNode[]));
@@ -481,120 +915,267 @@ function MenuTreeDialog({
     const isBefore = isTarget && dropTarget?.position === 'before';
     const isAfter = isTarget && dropTarget?.position === 'after';
     const isInside = isTarget && dropTarget?.position === 'inside';
+    const hasChildren = node.children.length > 0;
+    const isExpanded = searchQuery.trim() ? true : expandedIds.has(node.id);
+    const roleCount = getMenuRoleCount(node);
+    const visual = getMenuVisual(node);
+    const NodeIcon = visual.Icon;
 
     return (
-      <div key={node.id}>
-        {isBefore && <div className="h-0.5 bg-primary rounded mx-2 my-0.5" />}
-        <div
-          draggable
-          onDragStart={(e) => {
-            e.dataTransfer.effectAllowed = 'move';
-            setDragging({ id: node.id, parentId });
-          }}
-          onDragEnd={() => {
-            setDragging(null);
-            setDropTarget(null);
-          }}
-          onDragOver={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (!dragging || dragging.id === node.id) return;
-            if (isDescendantOf(tree, dragging.id, node.id)) return;
-
-            const rect = (
-              e.currentTarget as HTMLDivElement
-            ).getBoundingClientRect();
-            const ratio = (e.clientY - rect.top) / rect.height;
-
-            let pos: DropPosition;
-            if (ratio < 0.25) pos = 'before';
-            else if (ratio > 0.75) pos = 'after';
-            else pos = 'inside';
-
-            setDropTarget({ id: node.id, parentId, position: pos });
-          }}
-          onDragLeave={(e) => {
-            if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-              setDropTarget((prev) => (prev?.id === node.id ? null : prev));
-            }
-          }}
-          onDrop={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleDrop(dropTarget);
-          }}
-          style={{ paddingLeft: `${depth * 20}px` }}
-          className={[
-            'flex items-center gap-2 px-3 py-2 rounded-md cursor-grab select-none transition-all',
-            isDraggingThis ? 'opacity-40' : 'opacity-100',
-            isInside ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-muted',
-          ].join(' ')}
-        >
-          <span className="text-muted-foreground cursor-grab" title="Arrastar">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-              <circle cx="4" cy="3" r="1.2" />
-              <circle cx="10" cy="3" r="1.2" />
-              <circle cx="4" cy="7" r="1.2" />
-              <circle cx="10" cy="7" r="1.2" />
-              <circle cx="4" cy="11" r="1.2" />
-              <circle cx="10" cy="11" r="1.2" />
-            </svg>
-          </span>
-          <Menu className="h-4 w-4 text-muted-foreground shrink-0" />
-          <div className="flex-1 min-w-0">
-            <span className="text-sm font-medium">{getDisplayName(node)}</span>
-            <span className="text-xs text-muted-foreground ml-2">
-              {node.url}
-            </span>
-          </div>
-          {node.children.length > 0 && (
-            <span className="text-xs text-muted-foreground shrink-0">
-              {node.children.length}{' '}
-              {node.children.length === 1 ? t('treeChild') : t('treeChildren')}
-            </span>
-          )}
-        </div>
-        {isAfter && <div className="h-0.5 bg-primary rounded mx-2 my-0.5" />}
-        {node.children.length > 0 && (
-          <div className="ml-2 border-l border-border/50 pl-1 mt-0.5 mb-0.5 space-y-0.5">
+      <div key={node.id} className="space-y-1">
+        {isBefore ? (
+          <div className="mx-2 my-0.5 h-0.5 rounded bg-primary" />
+        ) : null}
+
+        <ContextMenu>
+          <ContextMenuTrigger asChild>
+            <div
+              draggable
+              onClick={() => {
+                void onSelect(node.id);
+              }}
+              onDragStart={(event) => {
+                event.dataTransfer.effectAllowed = 'move';
+                setDragging({ id: node.id, parentId });
+              }}
+              onDragEnd={() => {
+                setDragging(null);
+                setDropTarget(null);
+              }}
+              onDragOver={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+
+                if (!dragging || dragging.id === node.id) {
+                  return;
+                }
+
+                if (isDescendantOf(tree, dragging.id, node.id)) {
+                  return;
+                }
+
+                const rect = (
+                  event.currentTarget as HTMLDivElement
+                ).getBoundingClientRect();
+                const ratio = (event.clientY - rect.top) / rect.height;
+
+                let position: DropPosition = 'inside';
+                if (ratio < 0.25) {
+                  position = 'before';
+                } else if (ratio > 0.75) {
+                  position = 'after';
+                }
+
+                setDropTarget({ id: node.id, parentId, position });
+              }}
+              onDragLeave={(event) => {
+                if (
+                  !event.currentTarget.contains(event.relatedTarget as Node)
+                ) {
+                  setDropTarget((previous) =>
+                    previous?.id === node.id ? null : previous
+                  );
+                }
+              }}
+              onDrop={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                void handleDrop(dropTarget);
+              }}
+              style={{ paddingLeft: `${depth * 14}px` }}
+              className={cn(
+                'group relative mr-1 flex cursor-pointer items-center gap-2 rounded-xl border px-2 py-1.5 transition-all duration-150 select-none active:scale-[0.99]',
+                isDraggingThis ? 'opacity-40' : 'opacity-100',
+                selectedId === node.id
+                  ? 'border-primary/70 bg-linear-to-r from-primary/10 via-primary/5 to-background shadow-[0_10px_24px_-18px_hsl(var(--primary))] ring-1 ring-primary/15'
+                  : 'border-transparent hover:border-primary/30 hover:bg-muted/60 hover:shadow-sm',
+                isInside ? 'ring-2 ring-primary bg-primary/10' : ''
+              )}
+            >
+              {selectedId === node.id ? (
+                <span className="absolute inset-y-1 left-1 w-1 rounded-full bg-primary/70" />
+              ) : null}
+
+              <button
+                type="button"
+                className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (hasChildren) {
+                    toggleExpanded(node.id);
+                  }
+                }}
+                aria-label={hasChildren ? t('buttonViewTree') : t('menus')}
+              >
+                {hasChildren ? (
+                  isExpanded ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )
+                ) : (
+                  <span className="h-4 w-4" />
+                )}
+              </button>
+
+              <span
+                className="cursor-grab text-muted-foreground"
+                title="Arrastar"
+              >
+                <GripVertical className="h-4 w-4" />
+              </span>
+
+              <div
+                className={cn(
+                  'flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors',
+                  selectedId === node.id
+                    ? `${visual.iconWrapperClassName} ring-1 ring-primary/20`
+                    : visual.iconWrapperClassName
+                )}
+              >
+                <NodeIcon
+                  className={cn(
+                    'h-4 w-4',
+                    selectedId === node.id
+                      ? 'text-primary'
+                      : visual.iconClassName
+                  )}
+                />
+              </div>
+
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <span className="truncate text-sm font-medium">
+                    {getDisplayName(node)}
+                  </span>
+                  <TooltipBadge
+                    tooltip={
+                      node.menu_id == null ? t('rootMenuLabel') : t('subMenu')
+                    }
+                    variant={node.menu_id == null ? 'default' : 'secondary'}
+                    className="rounded-full px-2 py-0 text-[10px]"
+                  >
+                    {node.menu_id == null ? t('rootMenuLabel') : t('subMenu')}
+                  </TooltipBadge>
+                  <TooltipBadge
+                    tooltip={`${t('tabRoles')}: ${roleCount}`}
+                    variant="outline"
+                    className={cn(
+                      'rounded-full px-1.5 py-0 text-[10px]',
+                      roleCount > 0
+                        ? 'border-primary/30 bg-primary/5 text-primary'
+                        : 'text-muted-foreground'
+                    )}
+                  >
+                    <ShieldCheck className="mr-1 h-3 w-3" />
+                    {roleCount}
+                  </TooltipBadge>
+                </div>
+
+                <div className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+                  <span className="truncate">{node.url || '/'}</span>
+                  {node.order != null ? <span>#{node.order}</span> : null}
+                </div>
+              </div>
+            </div>
+          </ContextMenuTrigger>
+
+          <ContextMenuContent className="w-56">
+            <ContextMenuItem onClick={() => void onSelect(node.id)}>
+              <Menu className="h-4 w-4" />
+              {t('buttonEditMenu')}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => void onAddSubmenu(node.id)}>
+              <FolderPlus className="h-4 w-4" />
+              {t('addSubmenu')}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => void onDuplicate(node.id)}>
+              <Copy className="h-4 w-4" />
+              {t('duplicateMenu')}
+            </ContextMenuItem>
+            <ContextMenuItem onClick={() => void onMoveToRoot(node.id)}>
+              <House className="h-4 w-4" />
+              {t('moveToRoot')}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem
+              variant="destructive"
+              onClick={() => void onDelete(node.id)}
+            >
+              <Trash2 className="h-4 w-4" />
+              {t('buttonDeleteMenu')}
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
+
+        {isAfter ? (
+          <div className="mx-2 my-0.5 h-0.5 rounded bg-primary" />
+        ) : null}
+
+        {hasChildren && isExpanded ? (
+          <div className="mb-0.5 ml-3.5 space-y-1 border-l border-dashed border-primary/20 pl-1.5">
             {node.children.map((child) =>
               renderNode(child, node.id, depth + 1)
             )}
           </div>
-        )}
+        ) : null}
       </div>
     );
   };
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(v) => {
-        if (!v) onClose();
-      }}
-    >
-      <DialogContent className="sm:max-w-2xl max-h-[85vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            {t('treeDialogTitle')}
-            {saving && (
-              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-            )}
-          </DialogTitle>
-          <DialogDescription>{t('treeDialogDescription')}</DialogDescription>
-        </DialogHeader>
-
-        <div className="flex-1 overflow-y-auto border rounded-lg p-2 space-y-0.5 min-h-0">
-          {tree.length === 0 ? (
-            <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
-              {t('noMenusFound')}
+    <div className="flex h-full min-h-110 flex-col">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <h3 className="flex items-center gap-2 text-sm font-semibold">
+            <GitBranch className="h-4 w-4" />
+            {t('treeWorkspaceTitle')}
+          </h3>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {t('treeWorkspaceDescription')}
+          </p>
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            <TooltipBadge
+              tooltip={`${t('menus')}: ${menus.length}`}
+              variant="outline"
+              className="rounded-full px-2 py-0.5"
+            >
+              {menus.length} {t('menus')}
+            </TooltipBadge>
+            <TooltipBadge
+              tooltip={`${t('searchResults')}: ${filteredTree.length}`}
+              variant="secondary"
+              className="rounded-full px-2 py-0.5"
+            >
+              {filteredTree.length} {t('searchResults')}
+            </TooltipBadge>
+          </div>
+        </div>
+
+        {saving ? (
+          <Badge variant="outline" className="gap-1 rounded-full px-2 py-0.5">
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            {t('saveChanges')}
+          </Badge>
+        ) : null}
+      </div>
+
+      <div className="mt-1.5 rounded-lg border border-dashed bg-muted/20 p-2 text-[11px] leading-4 text-muted-foreground">
+        {t('treeDialogDescription')}
+      </div>
+
+      <ScrollArea className="mt-2 flex-1 pr-3">
+        <div className="space-y-1.5 pr-2">
+          {filteredTree.length === 0 ? (
+            <div className="flex min-h-55 items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
+              {t('treeEmptySearch')}
             </div>
           ) : (
-            tree.map((node) => renderNode(node, null, 0))
+            filteredTree.map((node) => renderNode(node, null, 0))
           )}
         </div>
-      </DialogContent>
-    </Dialog>
+      </ScrollArea>
+    </div>
   );
 }
 
@@ -613,6 +1194,7 @@ type MenuItem = {
     name?: string;
     locale?: { code: string };
   }>;
+  _count?: { role_menu?: number };
   name?: string;
   locale?: Record<string, MenuLocale>;
 };
@@ -621,6 +1203,63 @@ type MenuStats = {
   total: number;
 };
 
+type LocaleOption = {
+  code: string;
+  name: string;
+};
+
+type RequestError = {
+  response?: {
+    data?: {
+      message?: string | string[];
+      error?: string;
+    };
+  };
+  message?: string;
+};
+
+function getRequestErrorMessage(error: unknown, fallback: string) {
+  if (error && typeof error === 'object') {
+    const requestError = error as RequestError;
+    const message = requestError.response?.data?.message;
+
+    if (Array.isArray(message)) {
+      return message.join(', ');
+    }
+
+    return (
+      message ||
+      requestError.response?.data?.error ||
+      requestError.message ||
+      fallback
+    );
+  }
+
+  return fallback;
+}
+
+type TooltipBadgeProps = React.ComponentProps<typeof Badge> & {
+  tooltip: React.ReactNode;
+};
+
+function TooltipBadge({
+  tooltip,
+  className,
+  children,
+  ...props
+}: TooltipBadgeProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Badge {...props} className={cn('cursor-help', className)}>
+          {children}
+        </Badge>
+      </TooltipTrigger>
+      <TooltipContent sideOffset={6}>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 const NO_PARENT = '__none__';
 
 export default function MenuPage() {
@@ -635,15 +1274,16 @@ export default function MenuPage() {
   const [editFormError, setEditFormError] = useState<string | null>(null);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [selectedLocale, setSelectedLocale] = useState(currentLocaleCode);
+  const [isRefreshingMenu, setIsRefreshingMenu] = useState(false);
 
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(12);
 
-  const { data: allMenus } = useQuery<MenuItem[]>({
+  const { data: allMenus, refetch: refetchAllMenus } = useQuery<MenuItem[]>({
     queryKey: ['menus-all', currentLocaleCode],
     queryFn: async () => {
       const response = await request<MenuItem[]>({
-        url: `/menu/all`,
+        url: '/menu/all',
         method: 'GET',
       });
       return response.data;
@@ -655,7 +1295,7 @@ export default function MenuPage() {
     queryKey: ['menus-stats'],
     queryFn: async () => {
       const response = await request<MenuStats>({
-        url: `/menu/stats`,
+        url: '/menu/stats',
         method: 'GET',
       });
       return response.data;
@@ -672,12 +1312,15 @@ export default function MenuPage() {
       const params = new URLSearchParams();
       params.set('page', String(page));
       params.set('pageSize', String(pageSize));
-      if (searchQuery) params.set('search', searchQuery);
+      if (searchQuery) {
+        params.set('search', searchQuery);
+      }
 
       const response = await request<PaginatedResponse<MenuItem>>({
         url: `/menu?${params.toString()}`,
         method: 'GET',
       });
+
       return response.data;
     },
   });
@@ -724,41 +1367,131 @@ export default function MenuPage() {
     },
   });
 
+  const getMenuDisplayName = useCallback((menu: MenuItem | TreeNode) => {
+    return menu.name || menu.menu_locale?.[0]?.name || menu.slug;
+  }, []);
+
+  const editingMenuId = editingMenu?.id ?? null;
+
+  const handleEdit = useCallback(
+    async (menu: Pick<MenuItem, 'id'>) => {
+      setEditFormError(null);
+      setIsRefreshingMenu(true);
+
+      try {
+        const response = await request<MenuItem>({
+          url: `/menu/${menu.id}`,
+          method: 'GET',
+        });
+
+        const fullMenu = response.data;
+        const localeData: Record<string, MenuLocale> = {};
+
+        if (fullMenu.menu_locale && Array.isArray(fullMenu.menu_locale)) {
+          fullMenu.menu_locale.forEach((localeItem) => {
+            const localeCode = localeItem.locale?.code;
+            if (localeCode) {
+              localeData[localeCode] = { name: localeItem.name || '' };
+            }
+          });
+        }
+
+        (locales as LocaleOption[] | undefined)?.forEach((locale) => {
+          if (!localeData[locale.code]) {
+            localeData[locale.code] = { name: '' };
+          }
+        });
+
+        setEditingMenu({ ...fullMenu, locale: localeData });
+      } catch (error) {
+        console.error('Error fetching menu:', error);
+        toast.error(t('serverError'));
+      } finally {
+        setIsRefreshingMenu(false);
+      }
+    },
+    [locales, request, t]
+  );
+
   useEffect(() => {
-    if (editingMenu) {
-      const localeData = editingMenu.locale?.[selectedLocale];
-      editForm.setValue('name', localeData?.name ?? '');
+    if (editingMenuId == null) {
+      return;
     }
-  }, [selectedLocale, editingMenu?.id]);
+
+    setSelectedLocale(currentLocaleCode);
+  }, [currentLocaleCode, editingMenuId]);
 
   useEffect(() => {
-    if (editingMenu) {
-      const localeData = editingMenu.locale?.[currentLocaleCode];
-      setSelectedLocale(currentLocaleCode);
-      editForm.reset({
-        slug: editingMenu.slug || '',
-        url: editingMenu.url || '',
-        icon: editingMenu.icon || '',
-        order: editingMenu.order ?? undefined,
-        menu_id: editingMenu.menu_id ? String(editingMenu.menu_id) : NO_PARENT,
-        name: localeData?.name || editingMenu.name || '',
-      });
+    if (!editingMenu) {
+      return;
     }
-  }, [editingMenu?.id]);
 
-  const onSubmit = async (values: z.infer<typeof addMenuSchema>) => {
-    try {
-      const localePayload: Record<string, string> = {};
-      if (values.name) {
-        localePayload[currentLocaleCode] = values.name;
-      }
+    const localeData = editingMenu.locale?.[selectedLocale];
+    editForm.reset({
+      slug: editingMenu.slug || '',
+      url: editingMenu.url || '',
+      icon: editingMenu.icon || '',
+      order: editingMenu.order ?? undefined,
+      menu_id: editingMenu.menu_id ? String(editingMenu.menu_id) : NO_PARENT,
+      name: localeData?.name || editingMenu.name || '',
+    });
+  }, [editForm, editingMenu, selectedLocale]);
 
-      await request({
-        url: '/menu',
-        method: 'POST',
-        data: {
-          slug: values.slug,
-          url: values.url,
+  useEffect(() => {
+    if (!allMenus || allMenus.length === 0) {
+      setEditingMenu(null);
+      return;
+    }
+
+    if (editingMenu && allMenus.some((menu) => menu.id === editingMenu.id)) {
+      return;
+    }
+
+    const firstMenu = allMenus[0];
+    if (!firstMenu) {
+      return;
+    }
+
+    void handleEdit({ id: firstMenu.id });
+  }, [allMenus, editingMenu, handleEdit]);
+
+  const openCreateMenu = (parentId?: number | null) => {
+    setFormError(null);
+    form.reset({
+      slug: '',
+      url: '',
+      name: '',
+      icon: '',
+      order: undefined,
+      menu_id: parentId ? String(parentId) : NO_PARENT,
+    });
+    setIsDialogOpen(true);
+  };
+
+  const refreshWorkspace = useCallback(
+    async (menuIdToReload?: number | null) => {
+      await Promise.all([refetch(), refetchAllMenus()]);
+
+      if (menuIdToReload) {
+        await handleEdit({ id: menuIdToReload });
+      }
+    },
+    [handleEdit, refetch, refetchAllMenus]
+  );
+
+  const onSubmit = async (values: z.infer<typeof addMenuSchema>) => {
+    try {
+      const localePayload: Record<string, string> = {};
+      if (values.name) {
+        localePayload[currentLocaleCode] = values.name;
+      }
+
+      const response = await request<MenuItem>({
+        url: '/menu',
+        method: 'POST',
+        data: {
+          slug: values.slug,
+          url: values.url,
           icon: values.icon || undefined,
           order: values.order || undefined,
           menu_id:
@@ -779,64 +1512,31 @@ export default function MenuPage() {
         order: undefined,
         menu_id: NO_PARENT,
       });
-      refetch();
+
       setIsDialogOpen(false);
       setFormError(null);
       toast.success(t('menuCreatedSuccess'));
-    } catch (err: any) {
-      const msg =
-        err?.response?.data?.message ||
-        err?.response?.data?.error ||
-        err?.message ||
-        t('serverError');
-      setFormError(String(msg));
-    }
-  };
 
-  const handleEdit = async (menu: MenuItem) => {
-    setEditFormError(null);
-
-    try {
-      const response = await request<MenuItem>({
-        url: `/menu/${menu.id}`,
-        method: 'GET',
-      });
-
-      const fullMenu = response.data;
-      const localeData: Record<string, MenuLocale> = {};
-
-      if (fullMenu.menu_locale && Array.isArray(fullMenu.menu_locale)) {
-        fullMenu.menu_locale.forEach((ml: any) => {
-          const localeCode = ml.locale?.code;
-          if (localeCode) {
-            localeData[localeCode] = { name: ml.name || '' };
-          }
-        });
-      }
-
-      locales?.forEach((locale: any) => {
-        if (!localeData[locale.code]) {
-          localeData[locale.code] = { name: '' };
-        }
-      });
-
-      setEditingMenu({ ...fullMenu, locale: localeData });
-    } catch (err) {
-      console.error('Error fetching menu:', err);
-      toast.error(t('serverError'));
+      await refreshWorkspace(response.data?.id ?? null);
+    } catch (error: unknown) {
+      setFormError(getRequestErrorMessage(error, t('serverError')));
     }
   };
 
   const onEditSubmit = async (values: z.infer<typeof editMenuSchema>) => {
-    if (!editingMenu) return;
+    if (!editingMenu) {
+      return;
+    }
 
     try {
       const localePayload: Record<string, string> = {};
+
       if (editingMenu.locale) {
         Object.entries(editingMenu.locale).forEach(([code, data]) => {
           localePayload[code] = data.name;
         });
       }
+
       localePayload[selectedLocale] = values.name || '';
 
       await request({
@@ -857,43 +1557,564 @@ export default function MenuPage() {
 
       toast.success(t('menuUpdatedSuccess'));
       setEditFormError(null);
-      await refetch();
-      setEditingMenu(null);
-    } catch (err: any) {
-      const msg =
-        err?.response?.data?.message ||
-        err?.response?.data?.error ||
-        err?.message ||
-        t('serverError');
-      setEditFormError(String(msg));
+      await refreshWorkspace(editingMenu.id);
+    } catch (error: unknown) {
+      setEditFormError(getRequestErrorMessage(error, t('serverError')));
     }
   };
 
+  const handleDuplicateMenu = async (menuId: number) => {
+    try {
+      const response = await request<MenuItem>({
+        url: `/menu/${menuId}`,
+        method: 'GET',
+      });
+
+      const fullMenu = response.data;
+      const localePayload: Record<string, string> = {};
+
+      if (Array.isArray(fullMenu.menu_locale)) {
+        fullMenu.menu_locale.forEach((localeItem) => {
+          const localeCode = localeItem.locale?.code;
+          if (localeCode && localeItem.name) {
+            localePayload[localeCode] = `${localeItem.name} Copy`;
+          }
+        });
+      }
+
+      const slugSuffix = `copy-${Date.now().toString().slice(-4)}`;
+      const created = await request<MenuItem>({
+        url: '/menu',
+        method: 'POST',
+        data: {
+          slug: `${fullMenu.slug}-${slugSuffix}`.slice(0, 120),
+          url: fullMenu.url || '',
+          icon: fullMenu.icon || undefined,
+          order: fullMenu.order || undefined,
+          menu_id: fullMenu.menu_id ?? undefined,
+          ...(Object.keys(localePayload).length > 0
+            ? { locale: localePayload }
+            : {}),
+        },
+      });
+
+      toast.success(t('duplicateSuccess'));
+      await refreshWorkspace(created.data?.id ?? null);
+    } catch {
+      toast.error(t('duplicateError'));
+    }
+  };
+
+  const handleMoveToRoot = async (menuId: number) => {
+    try {
+      await request({
+        url: `/menu/${menuId}`,
+        method: 'PATCH',
+        data: { menu_id: null },
+      });
+
+      toast.success(t('moveToRootSuccess'));
+      await refreshWorkspace(menuId);
+    } catch {
+      toast.error(t('serverError'));
+    }
+  };
+
+  const requestDeleteMenu = async (menuId: number) => {
+    if (editingMenu?.id !== menuId) {
+      await handleEdit({ id: menuId });
+    }
+
+    setOpenDeleteModal(true);
+  };
+
   const onDelete = async () => {
+    if (!editingMenu) {
+      return;
+    }
+
     try {
       await request({
-        url: `/menu`,
+        url: '/menu',
         method: 'DELETE',
-        data: { ids: [Number(editingMenu?.id)] },
+        data: { ids: [Number(editingMenu.id)] },
       });
-      refetch();
+
       setOpenDeleteModal(false);
       setEditingMenu(null);
       setEditFormError(null);
       toast.success(t('menuDeletedSuccess'));
-    } catch (err: any) {
-      const msg =
-        err?.response?.data?.message ||
-        err?.response?.data?.error ||
-        err?.message ||
-        t('serverError');
-      setEditFormError(String(msg));
+
+      await Promise.all([refetch(), refetchAllMenus()]);
+    } catch (error: unknown) {
+      setEditFormError(getRequestErrorMessage(error, t('serverError')));
     }
   };
 
-  const getMenuDisplayName = (menu: MenuItem) => menu.name || menu.slug;
-  const parentMenuOptions = (allMenus ?? []).filter(
-    (m) => m.id !== editingMenu?.id
+  const descendantIds = useMemo(
+    () => (editingMenu ? getDescendantIds(allMenus ?? [], editingMenu.id) : []),
+    [allMenus, editingMenu]
+  );
+
+  const parentMenuOptions = useMemo(
+    () =>
+      (allMenus ?? []).filter(
+        (menu) =>
+          menu.id !== editingMenu?.id && !descendantIds.includes(menu.id)
+      ),
+    [allMenus, descendantIds, editingMenu]
+  );
+
+  const rootMenusCount = useMemo(
+    () => (allMenus ?? []).filter((menu) => menu.menu_id == null).length,
+    [allMenus]
+  );
+
+  const selectedChildrenCount = useMemo(
+    () =>
+      editingMenu
+        ? (allMenus ?? []).filter((menu) => menu.menu_id === editingMenu.id)
+            .length
+        : 0,
+    [allMenus, editingMenu]
+  );
+
+  const subMenuCount = useMemo(
+    () => Math.max((allMenus?.length ?? 0) - rootMenusCount, 0),
+    [allMenus, rootMenusCount]
+  );
+
+  const highlightKpiTitle = searchQuery.trim()
+    ? t('searchResults')
+    : t('childrenCount');
+
+  const highlightKpiValue = searchQuery.trim()
+    ? String(menusResponse?.total ?? 0)
+    : String(selectedChildrenCount);
+
+  const selectedParentLabel = useMemo(() => {
+    if (!editingMenu?.menu_id) {
+      return t('formParentMenuNone');
+    }
+
+    const parent = (allMenus ?? []).find(
+      (menu) => menu.id === editingMenu.menu_id
+    );
+    return parent ? getMenuDisplayName(parent) : t('formParentMenuNone');
+  }, [allMenus, editingMenu, getMenuDisplayName, t]);
+
+  const selectedRoleCount = useMemo(() => {
+    if (!editingMenu) {
+      return 0;
+    }
+
+    const currentMenu = (allMenus ?? []).find(
+      (menu) => menu.id === editingMenu.id
+    );
+    return getMenuRoleCount(currentMenu ?? editingMenu);
+  }, [allMenus, editingMenu]);
+
+  const selectedMenuVisual = editingMenu ? getMenuVisual(editingMenu) : null;
+
+  const detailPanel = editingMenu ? (
+    <div className="space-y-2.5">
+      <Card className="rounded-xl border-border/60 bg-linear-to-br from-primary/4 via-background to-background shadow-sm">
+        <CardHeader className="gap-2.5 p-3.5">
+          <div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
+            <div className="flex min-w-0 items-start gap-3">
+              <div
+                className={cn(
+                  'flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ring-1 ring-border/60',
+                  selectedMenuVisual?.iconWrapperClassName ?? 'bg-primary/10'
+                )}
+              >
+                {selectedMenuVisual ? (
+                  <selectedMenuVisual.Icon
+                    className={cn('h-6 w-6', selectedMenuVisual.iconClassName)}
+                  />
+                ) : (
+                  <Menu className="h-6 w-6 text-primary" />
+                )}
+              </div>
+
+              <div className="min-w-0">
+                <CardTitle className="flex flex-wrap items-center gap-2 text-base">
+                  {getMenuDisplayName(editingMenu)}
+                  {isRefreshingMenu ? (
+                    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                  ) : null}
+                  <TooltipBadge
+                    tooltip={`${t('tabRoles')}: ${selectedRoleCount}`}
+                    variant="outline"
+                    className={cn(
+                      'rounded-full px-2 py-0.5 text-[10px]',
+                      selectedRoleCount > 0
+                        ? 'border-primary/30 bg-primary/5 text-primary'
+                        : 'text-muted-foreground'
+                    )}
+                  >
+                    <ShieldCheck className="mr-1 h-3 w-3" />
+                    {selectedRoleCount}
+                  </TooltipBadge>
+                </CardTitle>
+                <CardDescription className="mt-1 flex items-center gap-1 text-xs">
+                  <Link className="h-3 w-3" />
+                  <span className="truncate">{editingMenu.url || '/'}</span>
+                </CardDescription>
+                <div className="mt-2 flex flex-wrap gap-1.5">
+                  <TooltipBadge tooltip={editingMenu.slug} variant="secondary">
+                    {editingMenu.slug}
+                  </TooltipBadge>
+                  <TooltipBadge
+                    tooltip={
+                      editingMenu.menu_id == null
+                        ? t('rootMenuLabel')
+                        : t('subMenu')
+                    }
+                    variant="outline"
+                  >
+                    {editingMenu.menu_id == null
+                      ? t('rootMenuLabel')
+                      : t('subMenu')}
+                  </TooltipBadge>
+                  {editingMenu.order != null ? (
+                    <TooltipBadge
+                      tooltip={`${t('editOrderLabel')}: #${editingMenu.order}`}
+                      variant="outline"
+                    >
+                      #{editingMenu.order}
+                    </TooltipBadge>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-1.5 xl:justify-end">
+              <Select
+                value={selectedLocale}
+                onValueChange={(value) => {
+                  const currentName = editForm.getValues('name');
+                  setEditingMenu((previous) => {
+                    if (!previous) {
+                      return previous;
+                    }
+
+                    return {
+                      ...previous,
+                      locale: {
+                        ...previous.locale,
+                        [selectedLocale]: { name: currentName ?? '' },
+                      },
+                    };
+                  });
+                  setSelectedLocale(value);
+                }}
+              >
+                <SelectTrigger className="h-8 w-full sm:w-36">
+                  <SelectValue placeholder={t('selectedLocaleLabel')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {((locales as LocaleOption[] | undefined) ?? []).map(
+                    (locale) => (
+                      <SelectItem key={locale.code} value={locale.code}>
+                        {locale.name}
+                      </SelectItem>
+                    )
+                  )}
+                </SelectContent>
+              </Select>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="outline"
+                    onClick={() => openCreateMenu(editingMenu.id)}
+                    className="h-8 w-8 cursor-pointer"
+                    aria-label={t('addSubmenu')}
+                  >
+                    <FolderPlus className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t('addSubmenu')}</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="outline"
+                    onClick={() => void handleDuplicateMenu(editingMenu.id)}
+                    className="h-8 w-8 cursor-pointer"
+                    aria-label={t('duplicateMenu')}
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t('duplicateMenu')}</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="destructive"
+                    onClick={() => setOpenDeleteModal(true)}
+                    className="h-8 w-8 cursor-pointer"
+                    aria-label={t('buttonDeleteMenu')}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t('buttonDeleteMenu')}</TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+
+          <KpiCardsGrid
+            columns={4}
+            className="gap-2.5"
+            cardClassName="border-border/60 shadow-none"
+            items={[
+              {
+                key: 'selected-parent',
+                title: t('parentMenuSummary'),
+                value: selectedParentLabel,
+                icon: House,
+                layout: 'compact',
+                accentClassName:
+                  'from-emerald-500/20 via-emerald-400/10 to-transparent',
+                iconContainerClassName: 'bg-emerald-50 text-emerald-600',
+                valueClassName: 'mt-2 text-sm font-semibold leading-5',
+              },
+              {
+                key: 'selected-children',
+                title: t('childrenCount'),
+                value: String(selectedChildrenCount),
+                icon: GitBranch,
+                layout: 'compact',
+                accentClassName:
+                  'from-violet-500/20 via-fuchsia-500/10 to-transparent',
+                iconContainerClassName: 'bg-violet-50 text-violet-600',
+              },
+              {
+                key: 'selected-roles',
+                title: t('tabRoles'),
+                value: String(selectedRoleCount),
+                icon: ShieldCheck,
+                layout: 'compact',
+                accentClassName:
+                  'from-sky-500/20 via-cyan-500/10 to-transparent',
+                iconContainerClassName: 'bg-sky-50 text-sky-700',
+              },
+              {
+                key: 'selected-locale',
+                title: t('selectedLocaleLabel'),
+                value: selectedLocale.toUpperCase(),
+                icon: Settings,
+                layout: 'compact',
+                accentClassName:
+                  'from-amber-500/20 via-yellow-500/10 to-transparent',
+                iconContainerClassName: 'bg-amber-50 text-amber-700',
+                valueClassName: 'mt-2 text-sm font-semibold uppercase',
+              },
+            ]}
+          />
+        </CardHeader>
+      </Card>
+
+      <Card className="border-border/60 shadow-sm">
+        <CardContent className="p-3.5">
+          <Tabs defaultValue="basic-info" className="space-y-3">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="basic-info">{t('tabBasicInfo')}</TabsTrigger>
+              <TabsTrigger value="roles">{t('tabRoles')}</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="basic-info" className="space-y-3">
+              <div>
+                <h3 className="text-sm font-semibold">
+                  {t('selectedMenuTitle')}
+                </h3>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t('selectedMenuDescription')}
+                </p>
+              </div>
+
+              <Form {...editForm}>
+                <form
+                  onSubmit={editForm.handleSubmit(onEditSubmit)}
+                  className="space-y-3"
+                >
+                  <FormField
+                    control={editForm.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('editNameLabel')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t('editNamePlaceholder')}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <FormField
+                      control={editForm.control}
+                      name="slug"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('editSlugLabel')}</FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={editForm.control}
+                      name="url"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('editUrlLabel')}</FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <div className="grid gap-4 md:grid-cols-2">
+                    <FormField
+                      control={editForm.control}
+                      name="icon"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('editIconLabel')}</FormLabel>
+                          <FormControl>
+                            <Input {...field} value={field.value ?? ''} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={editForm.control}
+                      name="order"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('editOrderLabel')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="number"
+                              min={1}
+                              {...field}
+                              value={field.value ?? ''}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <FormField
+                    control={editForm.control}
+                    name="menu_id"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('editParentMenuLabel')}</FormLabel>
+                        <Select
+                          value={field.value ?? NO_PARENT}
+                          onValueChange={field.onChange}
+                        >
+                          <FormControl>
+                            <SelectTrigger className="w-full">
+                              <SelectValue
+                                placeholder={t('editParentMenuPlaceholder')}
+                              />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent className="w-full">
+                            <SelectItem value={NO_PARENT}>
+                              {t('formParentMenuNone')}
+                            </SelectItem>
+                            {parentMenuOptions.map((menu) => (
+                              <SelectItem key={menu.id} value={String(menu.id)}>
+                                {getMenuDisplayName(menu)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  {editFormError ? (
+                    <Alert
+                      variant="destructive"
+                      className="rounded-md border-red-300 bg-red-50 p-4"
+                    >
+                      <AlertTitle className="text-sm">
+                        {t('verifyYourInput')}
+                      </AlertTitle>
+                      <AlertDescription className="text-sm">
+                        {editFormError}
+                      </AlertDescription>
+                    </Alert>
+                  ) : null}
+
+                  <div className="flex flex-col gap-2 sm:flex-row">
+                    <Button
+                      type="submit"
+                      className="cursor-pointer sm:min-w-36"
+                    >
+                      {t('saveChanges')}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="cursor-pointer"
+                      onClick={() => void handleMoveToRoot(editingMenu.id)}
+                    >
+                      <House className="mr-1 h-4 w-4" />
+                      {t('moveToRoot')}
+                    </Button>
+                  </div>
+                </form>
+              </Form>
+            </TabsContent>
+
+            <TabsContent value="roles">
+              <MenuRolesSection menuId={editingMenu.id} />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  ) : (
+    <EmptyState
+      className="h-full min-h-105"
+      icon={<GitBranch className="h-12 w-12" />}
+      title={t('noMenuSelectedTitle')}
+      description={t('noMenuSelectedDescription')}
+      actionLabel={t('buttonAddMenu')}
+      onAction={() => openCreateMenu()}
+    />
   );
 
   return (
@@ -901,50 +2122,152 @@ export default function MenuPage() {
       <PageHeader
         breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('menus') }]}
         actions={[
-          {
-            label: t('buttonViewTree'),
-            onClick: () => setIsTreeOpen(true),
-            variant: 'outline',
-            icon: <GitBranch className="h-4 w-4" />,
-          },
           {
             label: t('buttonAddMenu'),
-            onClick: () => setIsDialogOpen(true),
+            onClick: () => openCreateMenu(),
             variant: 'default',
+            icon: <Plus className="h-4 w-4" />,
           },
         ]}
         title={t('title')}
         description={t('description')}
       />
 
-      <StatsCards
-        className="sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1"
-        stats={[
+      <KpiCardsGrid
+        columns={4}
+        className="mt-3 gap-3"
+        cardClassName="shadow-sm"
+        items={[
           {
+            key: 'total-menus',
             title: t('totalMenus'),
             value: String(menuStats?.total ?? 0),
-            icon: <Menu className="h-5 w-5" />,
-            iconBgColor: 'bg-blue-50',
-            iconColor: 'text-blue-600',
+            icon: Menu,
+            layout: 'compact',
+            accentClassName: 'from-blue-500/20 via-sky-500/10 to-transparent',
+            iconContainerClassName: 'bg-blue-50 text-blue-600',
+          },
+          {
+            key: 'root-menus',
+            title: t('rootMenuLabel'),
+            value: String(rootMenusCount),
+            icon: House,
+            layout: 'compact',
+            accentClassName:
+              'from-emerald-500/20 via-green-500/10 to-transparent',
+            iconContainerClassName: 'bg-emerald-50 text-emerald-600',
+          },
+          {
+            key: 'submenus',
+            title: t('totalSubmenus'),
+            value: String(subMenuCount),
+            icon: GitBranch,
+            layout: 'compact',
+            accentClassName:
+              'from-violet-500/20 via-fuchsia-500/10 to-transparent',
+            iconContainerClassName: 'bg-violet-50 text-violet-600',
+          },
+          {
+            key: 'search-or-children',
+            title: highlightKpiTitle,
+            value: highlightKpiValue,
+            icon: PanelLeftOpen,
+            layout: 'compact',
+            accentClassName:
+              'from-amber-500/20 via-yellow-500/10 to-transparent',
+            iconContainerClassName: 'bg-amber-50 text-amber-700',
           },
         ]}
       />
 
-      <SearchBar
-        searchQuery={searchQuery}
-        onSearchChange={setSearchQuery}
-        onSearch={() => refetch()}
-        placeholder={t('searchPlaceholder')}
-        className="mt-4"
-      />
+      <div className="mt-3 flex flex-col gap-2.5 xl:flex-row xl:items-center xl:justify-between">
+        <SearchBar
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onSearch={() => {
+            void Promise.all([refetch(), refetchAllMenus()]);
+          }}
+          placeholder={t('searchPlaceholder')}
+          className="mt-0 flex-1"
+        />
+
+        <div className="flex flex-wrap items-center gap-2 xl:justify-end">
+          <Button
+            variant="outline"
+            className="cursor-pointer lg:hidden"
+            onClick={() => setIsTreeOpen(true)}
+          >
+            <PanelLeftOpen className="mr-1 h-4 w-4" />
+            {t('openTreeOnMobile')}
+          </Button>
+
+          <Button
+            variant="outline"
+            className="cursor-pointer"
+            onClick={() => {
+              void refreshWorkspace(editingMenu?.id ?? null);
+            }}
+          >
+            <RefreshCcw className="mr-1 h-4 w-4" />
+            {t('refresh')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-3 hidden lg:block">
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="min-h-145 overflow-hidden rounded-xl border border-border/60 bg-card shadow-sm"
+        >
+          <ResizablePanel defaultSize={38} minSize={28} className="p-3">
+            <MenuTreeWorkspace
+              menus={(allMenus ?? []) as TreeNode[]}
+              searchQuery={searchQuery}
+              selectedId={editingMenu?.id ?? null}
+              onSelect={async (menuId) => {
+                await handleEdit({ id: menuId });
+              }}
+              onSaved={async () => {
+                await refreshWorkspace(editingMenu?.id ?? null);
+              }}
+              onAddSubmenu={(menuId) => openCreateMenu(menuId)}
+              onDuplicate={handleDuplicateMenu}
+              onDelete={requestDeleteMenu}
+              onMoveToRoot={handleMoveToRoot}
+            />
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          <ResizablePanel
+            defaultSize={62}
+            minSize={36}
+            className="bg-muted/10 p-3"
+          >
+            {detailPanel}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      <div className="mt-3 space-y-3 lg:hidden">{detailPanel}</div>
 
-      <div className="flex-1 pt-4">
-        {isLoading && (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {Array.from({ length: 3 }).map((_, i) => (
+      <div className="pt-4 lg:hidden">
+        <div className="mb-3 flex items-center justify-between gap-3">
+          <div>
+            <h3 className="text-sm font-semibold">{t('menus')}</h3>
+            <p className="text-xs text-muted-foreground">{t('description')}</p>
+          </div>
+          <Badge variant="outline" className="rounded-full px-2.5 py-1">
+            {menusResponse?.total ?? 0}
+          </Badge>
+        </div>
+
+        {isLoading ? (
+          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, index) => (
               <Card
-                key={`skeleton-${i}`}
-                className="flex flex-col justify-between gap-2 rounded-2xl border border-border/60 bg-card p-4 shadow-sm animate-pulse"
+                key={`skeleton-${index}`}
+                className="animate-pulse rounded-2xl border border-border/60 bg-card p-4 shadow-sm"
               >
                 <CardHeader className="p-0">
                   <div className="space-y-2">
@@ -955,113 +2278,209 @@ export default function MenuPage() {
               </Card>
             ))}
           </div>
-        )}
-
-        {!isLoading &&
-        (!menusResponse?.data || menusResponse.data.length === 0) ? (
+        ) : !menusResponse?.data || menusResponse.data.length === 0 ? (
           <EmptyState
             icon={<Menu className="h-12 w-12" />}
             title={t('noMenusFound')}
             description={t('description')}
             actionLabel={t('buttonAddMenu')}
-            onAction={() => setIsDialogOpen(true)}
+            onAction={() => openCreateMenu()}
           />
         ) : (
-          <div className="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-            {menusResponse?.data?.map((menu: MenuItem) => (
-              <Card
-                key={String(menu.id)}
-                onDoubleClick={() => handleEdit(menu)}
-                className="cursor-pointer rounded-md flex flex-col justify-between gap-2 border border-border/60 bg-card p-4 shadow-sm transition hover:border-primary"
-              >
-                <CardHeader className="flex items-start justify-between gap-4 p-0">
-                  <div className="flex items-center gap-3 flex-1">
-                    <div className="h-12 w-12 shrink-0 rounded-full bg-primary/10 flex items-center justify-center">
-                      <Menu className="h-6 w-6 text-primary" />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <CardTitle className="text-sm font-semibold truncate">
-                        {getMenuDisplayName(menu)}
-                      </CardTitle>
-                      <CardDescription className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
-                        <Link className="h-3 w-3" />
-                        <span className="truncate">{menu.url}</span>
-                      </CardDescription>
-                      <div className="flex gap-1 mt-1 flex-wrap">
-                        <Badge
-                          variant="secondary"
-                          className="text-xs px-1.5 py-0"
-                        >
-                          {menu.slug}
-                        </Badge>
-                        {menu.order != null && (
-                          <Badge
-                            variant="outline"
-                            className="text-xs px-1.5 py-0"
-                          >
-                            #{menu.order}
-                          </Badge>
+          <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+            {menusResponse.data.map((menu: MenuItem) => {
+              const visual = getMenuVisual(menu);
+              const CardIcon = visual.Icon;
+              const roleCount = getMenuRoleCount(menu);
+
+              return (
+                <Card
+                  key={menu.id}
+                  onClick={() => {
+                    void handleEdit(menu);
+                  }}
+                  className={cn(
+                    'cursor-pointer rounded-2xl border border-border/60 bg-card p-4 shadow-sm transition hover:border-primary hover:shadow-md active:scale-[0.99]',
+                    editingMenu?.id === menu.id
+                      ? 'border-primary bg-linear-to-r from-primary/5 to-background shadow-md'
+                      : ''
+                  )}
+                >
+                  <CardHeader className="flex items-start justify-between gap-4 p-0">
+                    <div className="flex min-w-0 flex-1 items-center gap-3">
+                      <div
+                        className={cn(
+                          'flex h-12 w-12 shrink-0 items-center justify-center rounded-full',
+                          visual.iconWrapperClassName
                         )}
-                        {menu.menu_id != null && (
-                          <Badge
+                      >
+                        <CardIcon
+                          className={cn('h-6 w-6', visual.iconClassName)}
+                        />
+                      </div>
+
+                      <div className="min-w-0 flex-1">
+                        <CardTitle className="truncate text-sm font-semibold">
+                          {getMenuDisplayName(menu)}
+                        </CardTitle>
+                        <CardDescription className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
+                          <Link className="h-3 w-3" />
+                          <span className="truncate">{menu.url || '/'}</span>
+                        </CardDescription>
+                        <div className="mt-2 flex flex-wrap gap-1">
+                          <TooltipBadge
+                            tooltip={menu.slug}
+                            variant="secondary"
+                            className="px-1.5 py-0 text-xs"
+                          >
+                            {menu.slug}
+                          </TooltipBadge>
+                          {menu.order != null ? (
+                            <TooltipBadge
+                              tooltip={`${t('editOrderLabel')}: #${menu.order}`}
+                              variant="outline"
+                              className="px-1.5 py-0 text-xs"
+                            >
+                              #{menu.order}
+                            </TooltipBadge>
+                          ) : null}
+                          {menu.menu_id != null ? (
+                            <TooltipBadge
+                              tooltip={t('subMenu')}
+                              variant="outline"
+                              className="px-1.5 py-0 text-xs"
+                            >
+                              {t('subMenu')}
+                            </TooltipBadge>
+                          ) : (
+                            <TooltipBadge
+                              tooltip={t('rootMenuLabel')}
+                              variant="outline"
+                              className="px-1.5 py-0 text-xs"
+                            >
+                              {t('rootMenuLabel')}
+                            </TooltipBadge>
+                          )}
+                          <TooltipBadge
+                            tooltip={`${t('tabRoles')}: ${roleCount}`}
                             variant="outline"
-                            className="text-xs px-1.5 py-0"
+                            className={cn(
+                              'px-1.5 py-0 text-xs',
+                              roleCount > 0
+                                ? 'border-primary/30 bg-primary/5 text-primary'
+                                : 'text-muted-foreground'
+                            )}
                           >
-                            {t('subMenu')}
-                          </Badge>
-                        )}
+                            <ShieldCheck className="mr-1 h-3 w-3" />
+                            {roleCount}
+                          </TooltipBadge>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleEdit(menu)}
-                  >
-                    {t('buttonEditMenu')}
-                  </Button>
-                </CardHeader>
-              </Card>
-            ))}
+
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="cursor-pointer"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        void handleEdit(menu);
+                      }}
+                    >
+                      {t('buttonEditMenu')}
+                    </Button>
+                  </CardHeader>
+                </Card>
+              );
+            })}
           </div>
         )}
+      </div>
 
-        <div className="w-full border-t pt-2 mt-4">
-          <PaginationFooter
-            currentPage={page}
-            pageSize={pageSize}
-            totalItems={menusResponse?.total || 0}
-            onPageChange={setPage}
-            onPageSizeChange={(size) => {
-              setPageSize(size);
-              setPage(1);
-            }}
-            pageSizeOptions={[6, 12, 24, 48]}
-          />
-        </div>
+      <div className="mt-4 w-full border-t pt-2 lg:hidden">
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={menusResponse?.total || 0}
+          onPageChange={setPage}
+          onPageSizeChange={(size) => {
+            setPageSize(size);
+            setPage(1);
+          }}
+          pageSizeOptions={[6, 12, 24, 48]}
+        />
+      </div>
 
-        <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <SheetContent className="w-full sm:max-w-lg overflow-y-auto gap-0">
-            <SheetHeader>
-              <SheetTitle>{t('dialogAddMenuTitle')}</SheetTitle>
-              <SheetDescription>
-                {t('dialogAddMenuDescription')}
-              </SheetDescription>
-            </SheetHeader>
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-4 px-4 pt-2"
-              >
+      <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <SheetContent className="w-full gap-0 overflow-y-auto sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>{t('dialogAddMenuTitle')}</SheetTitle>
+            <SheetDescription>{t('dialogAddMenuDescription')}</SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-4 px-4 pt-2"
+            >
+              <FormField
+                control={form.control}
+                name="slug"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formSlugLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('formSlugPlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formUrlLabel')}</FormLabel>
+                    <FormControl>
+                      <Input placeholder={t('formUrlPlaceholder')} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formNameLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('formNamePlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
                 <FormField
                   control={form.control}
-                  name="slug"
+                  name="icon"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t('formSlugLabel')}</FormLabel>
+                      <FormLabel>{t('formIconLabel')}</FormLabel>
                       <FormControl>
                         <Input
-                          placeholder={t('formSlugPlaceholder')}
+                          placeholder={t('formIconPlaceholder')}
                           {...field}
                         />
                       </FormControl>
@@ -1069,379 +2488,133 @@ export default function MenuPage() {
                     </FormItem>
                   )}
                 />
+
                 <FormField
                   control={form.control}
-                  name="url"
+                  name="order"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>{t('formUrlLabel')}</FormLabel>
+                      <FormLabel>{t('formOrderLabel')}</FormLabel>
                       <FormControl>
                         <Input
-                          placeholder={t('formUrlPlaceholder')}
+                          type="number"
+                          min={1}
+                          placeholder={t('formOrderPlaceholder')}
                           {...field}
+                          value={field.value ?? ''}
                         />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
-                <FormField
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('formNameLabel')}</FormLabel>
+              </div>
+
+              <FormField
+                control={form.control}
+                name="menu_id"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formParentMenuLabel')}</FormLabel>
+                    <Select
+                      value={field.value ?? NO_PARENT}
+                      onValueChange={field.onChange}
+                    >
                       <FormControl>
-                        <Input
-                          placeholder={t('formNamePlaceholder')}
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <div className="grid grid-cols-2 gap-4">
-                  <FormField
-                    control={form.control}
-                    name="icon"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('formIconLabel')}</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder={t('formIconPlaceholder')}
-                            {...field}
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t('formParentMenuPlaceholder')}
                           />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="order"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('formOrderLabel')}</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="number"
-                            min={1}
-                            placeholder={t('formOrderPlaceholder')}
-                            {...field}
-                            value={field.value ?? ''}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-
-                <FormField
-                  control={form.control}
-                  name="menu_id"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('formParentMenuLabel')}</FormLabel>
-                      <Select
-                        value={field.value ?? NO_PARENT}
-                        onValueChange={field.onChange}
-                      >
-                        <FormControl>
-                          <SelectTrigger className="w-full">
-                            <SelectValue
-                              placeholder={t('formParentMenuPlaceholder')}
-                            />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent className="w-full">
-                          <SelectItem value={NO_PARENT}>
-                            {t('formParentMenuNone')}
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent className="w-full">
+                        <SelectItem value={NO_PARENT}>
+                          {t('formParentMenuNone')}
+                        </SelectItem>
+                        {(allMenus ?? []).map((menu) => (
+                          <SelectItem key={menu.id} value={String(menu.id)}>
+                            {getMenuDisplayName(menu)}
                           </SelectItem>
-                          {(allMenus ?? []).map((m) => (
-                            <SelectItem key={m.id} value={String(m.id)}>
-                              {getMenuDisplayName(m)}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {formError && (
-                  <Alert
-                    variant="destructive"
-                    className="border-red-300 bg-red-50 rounded-md p-4"
-                  >
-                    <AlertTitle className="text-sm">
-                      {t('verifyYourInput')}
-                    </AlertTitle>
-                    <AlertDescription className="text-sm">
-                      {formError}
-                    </AlertDescription>
-                  </Alert>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
                 )}
+              />
 
-                <Button type="submit" className="w-full">
-                  <Plus className="h-4 w-4 mr-1" />
-                  {t('buttonAddMenu')}
-                </Button>
-              </form>
-            </Form>
-          </SheetContent>
-        </Sheet>
-
-        {editingMenu && (
-          <Sheet open={!!editingMenu} onOpenChange={() => setEditingMenu(null)}>
-            <SheetContent className="w-full sm:max-w-lg overflow-y-auto p-0">
-              <SheetHeader className="px-6 pt-6 pb-4 border-b">
-                <div className="flex items-start justify-between gap-3">
-                  <div className="min-w-0">
-                    <SheetTitle>{t('titleEditMenu')}</SheetTitle>
-                    <SheetDescription className="mt-0.5 truncate">
-                      {getMenuDisplayName(editingMenu)}
-                    </SheetDescription>
-                  </div>
-                  <Select
-                    value={selectedLocale}
-                    onValueChange={(value) => {
-                      const currentName = editForm.getValues('name');
-                      setEditingMenu((prev) => {
-                        if (!prev) return prev;
-                        return {
-                          ...prev,
-                          locale: {
-                            ...prev.locale,
-                            [selectedLocale]: { name: currentName ?? '' },
-                          },
-                        };
-                      });
-                      setSelectedLocale(value);
-                    }}
-                  >
-                    <SelectTrigger className="w-[180px] h-8 shrink-0">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {(locales ?? []).map((locale: any) => (
-                        <SelectItem key={locale.code} value={locale.code}>
-                          {locale.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </SheetHeader>
-
-              <div className="px-6 py-4">
-                <Tabs defaultValue="basic-info">
-                  <TabsList className="w-full">
-                    <TabsTrigger value="basic-info" className="flex-1">
-                      {t('tabBasicInfo')}
-                    </TabsTrigger>
-                    <TabsTrigger value="roles" className="flex-1">
-                      {t('tabRoles')}
-                    </TabsTrigger>
-                  </TabsList>
-
-                  <TabsContent value="basic-info" className="mt-4 space-y-6">
-                    <Form {...editForm}>
-                      <form
-                        onSubmit={editForm.handleSubmit(onEditSubmit)}
-                        className="space-y-4"
-                      >
-                        <FormField
-                          control={editForm.control}
-                          name="name"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>{t('editNameLabel')}</FormLabel>
-                              <FormControl>
-                                <Input
-                                  placeholder={t('editNamePlaceholder')}
-                                  {...field}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        <FormField
-                          control={editForm.control}
-                          name="slug"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>{t('editSlugLabel')}</FormLabel>
-                              <FormControl>
-                                <Input {...field} />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        <FormField
-                          control={editForm.control}
-                          name="url"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>{t('editUrlLabel')}</FormLabel>
-                              <FormControl>
-                                <Input {...field} />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                        <div className="grid grid-cols-2 gap-4">
-                          <FormField
-                            control={editForm.control}
-                            name="icon"
-                            render={({ field }) => (
-                              <FormItem>
-                                <FormLabel>{t('editIconLabel')}</FormLabel>
-                                <FormControl>
-                                  <Input {...field} value={field.value ?? ''} />
-                                </FormControl>
-                                <FormMessage />
-                              </FormItem>
-                            )}
-                          />
-                          <FormField
-                            control={editForm.control}
-                            name="order"
-                            render={({ field }) => (
-                              <FormItem>
-                                <FormLabel>{t('editOrderLabel')}</FormLabel>
-                                <FormControl>
-                                  <Input
-                                    type="number"
-                                    min={1}
-                                    {...field}
-                                    value={field.value ?? ''}
-                                  />
-                                </FormControl>
-                                <FormMessage />
-                              </FormItem>
-                            )}
-                          />
-                        </div>
-
-                        <FormField
-                          control={editForm.control}
-                          name="menu_id"
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel>{t('editParentMenuLabel')}</FormLabel>
-                              <Select
-                                value={field.value ?? NO_PARENT}
-                                onValueChange={field.onChange}
-                              >
-                                <FormControl>
-                                  <SelectTrigger className="w-full">
-                                    <SelectValue
-                                      placeholder={t(
-                                        'editParentMenuPlaceholder'
-                                      )}
-                                    />
-                                  </SelectTrigger>
-                                </FormControl>
-                                <SelectContent className="w-full">
-                                  <SelectItem value={NO_PARENT}>
-                                    {t('formParentMenuNone')}
-                                  </SelectItem>
-                                  {parentMenuOptions.map((m) => (
-                                    <SelectItem key={m.id} value={String(m.id)}>
-                                      {getMenuDisplayName(m)}
-                                    </SelectItem>
-                                  ))}
-                                </SelectContent>
-                              </Select>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-
-                        {editFormError && (
-                          <Alert
-                            variant="destructive"
-                            className="border-red-300 bg-red-50 rounded-md p-4"
-                          >
-                            <AlertTitle className="text-sm">
-                              {t('verifyYourInput')}
-                            </AlertTitle>
-                            <AlertDescription className="text-sm">
-                              {editFormError}
-                            </AlertDescription>
-                          </Alert>
-                        )}
-
-                        <div className="flex flex-col w-full gap-2 pt-2">
-                          <Button type="submit" className="w-full">
-                            {t('saveChanges')}
-                          </Button>
-                          <Button
-                            className="w-full"
-                            type="button"
-                            variant="outline"
-                            onClick={() => setEditingMenu(null)}
-                          >
-                            {t('cancel')}
-                          </Button>
-                        </div>
-                      </form>
-                    </Form>
-
-                    <div className="border-t pt-4">
-                      <Button
-                        className="w-full cursor-pointer"
-                        variant="destructive"
-                        onClick={() => setOpenDeleteModal(true)}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                        <span>{t('buttonDeleteMenu')}</span>
-                      </Button>
-                    </div>
-                  </TabsContent>
-
-                  <TabsContent value="roles" className="mt-4">
-                    <MenuRolesSection menuId={editingMenu.id} />
-                  </TabsContent>
-                </Tabs>
-              </div>
-            </SheetContent>
-          </Sheet>
-        )}
-
-        <AlertDialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>{t('dialogDeleteMenuTitle')}</AlertDialogTitle>
-              <AlertDialogDescription>
-                {t('dialogDeleteMenuDescription')}
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>{t('deleteMenuCancel')}</AlertDialogCancel>
-              <AlertDialogAction onClick={onDelete}>
-                {t('deleteMenuConfirm')}
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-
-        <MenuTreeDialog
-          open={isTreeOpen}
-          onClose={() => setIsTreeOpen(false)}
-          menus={(allMenus ?? []) as TreeNode[]}
-          onSaved={() => {
-            refetch();
-          }}
-        />
-      </div>
+              {formError ? (
+                <Alert
+                  variant="destructive"
+                  className="rounded-md border-red-300 bg-red-50 p-4"
+                >
+                  <AlertTitle className="text-sm">
+                    {t('verifyYourInput')}
+                  </AlertTitle>
+                  <AlertDescription className="text-sm">
+                    {formError}
+                  </AlertDescription>
+                </Alert>
+              ) : null}
+
+              <Button type="submit" className="w-full cursor-pointer">
+                <Plus className="mr-1 h-4 w-4" />
+                {t('buttonAddMenu')}
+              </Button>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('dialogDeleteMenuTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('dialogDeleteMenuDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('deleteMenuCancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={onDelete}>
+              {t('deleteMenuConfirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Drawer open={isTreeOpen} onOpenChange={setIsTreeOpen} direction="left">
+        <DrawerContent className="max-w-full sm:max-w-md">
+          <DrawerHeader>
+            <DrawerTitle>{t('treeWorkspaceTitle')}</DrawerTitle>
+            <DrawerDescription>
+              {t('treeWorkspaceDescription')}
+            </DrawerDescription>
+          </DrawerHeader>
+
+          <div className="px-4 pb-4">
+            <MenuTreeWorkspace
+              menus={(allMenus ?? []) as TreeNode[]}
+              searchQuery={searchQuery}
+              selectedId={editingMenu?.id ?? null}
+              onSelect={async (menuId) => {
+                await handleEdit({ id: menuId });
+                setIsTreeOpen(false);
+              }}
+              onSaved={async () => {
+                await refreshWorkspace(editingMenu?.id ?? null);
+              }}
+              onAddSubmenu={(menuId) => {
+                setIsTreeOpen(false);
+                openCreateMenu(menuId);
+              }}
+              onDuplicate={handleDuplicateMenu}
+              onDelete={requestDeleteMenu}
+              onMoveToRoot={handleMoveToRoot}
+            />
+          </div>
+        </DrawerContent>
+      </Drawer>
     </Page>
   );
 }