@hed-hog/core 0.0.213 → 0.0.214

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

@@ -0,0 +1,1441 @@
+'use client';
+
+import {
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  StatsCards,
+} from '@/components/entity-list';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  GitBranch,
+  Link,
+  Loader2,
+  Menu,
+  Plus,
+  ShieldCheck,
+  Trash2,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+type PaginatedResponse<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type RoleLocale = {
+  name: string;
+  description?: string;
+};
+
+type RoleItem = {
+  id: number;
+  name?: string;
+  role_locale?: RoleLocale[];
+  role_menu?: Array<{ role_id: number; menu_id: number }>;
+};
+
+type MenuRolesSectionProps = {
+  menuId: number;
+};
+
+function MenuRolesSection({ menuId }: MenuRolesSectionProps) {
+  const t = useTranslations('core.MenuPage');
+  const { request, currentLocaleCode } = useApp();
+  const [togglingRoleId, setTogglingRoleId] = useState<number | null>(null);
+
+  const {
+    data: rolesData,
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResponse<RoleItem>>({
+    queryKey: ['menu-roles', menuId, currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResponse<RoleItem>>({
+        url: `/menu/${menuId}/role?pageSize=10000`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: !!menuId,
+  });
+
+  const roles = rolesData?.data ?? [];
+
+  const isRoleAssigned = (role: RoleItem) =>
+    !!(role.role_menu && role.role_menu.length > 0);
+
+  const getRoleName = (role: RoleItem) =>
+    role.role_locale?.[0]?.name ?? role.name ?? String(role.id);
+
+  const getRoleDescription = (role: RoleItem) =>
+    role.role_locale?.[0]?.description ?? '';
+
+  const handleToggle = async (roleId: number, currentlyAssigned: boolean) => {
+    setTogglingRoleId(roleId);
+    try {
+      const currentIds = roles
+        .filter((r) => isRoleAssigned(r))
+        .map((r) => r.id);
+
+      const newIds = currentlyAssigned
+        ? currentIds.filter((id) => id !== roleId)
+        : [...new Set([...currentIds, roleId])];
+
+      await request({
+        url: `/menu/${menuId}/role`,
+        method: 'PATCH',
+        data: { ids: newIds },
+      });
+
+      toast.success(currentlyAssigned ? t('roleRemoved') : t('roleAssigned'));
+      await refetch();
+    } catch {
+      toast.error(t('errorAssigningRole'));
+    } finally {
+      setTogglingRoleId(null);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        <span className="ml-2 text-sm text-muted-foreground">
+          {t('loadingRoles')}
+        </span>
+      </div>
+    );
+  }
+
+  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>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <h4 className="text-sm font-semibold flex items-center gap-2">
+          <ShieldCheck className="h-4 w-4" />
+          {t('rolesTitle')}
+        </h4>
+        <p className="text-xs text-muted-foreground mt-1">
+          {t('rolesDescription')}
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        {roles.map((role) => {
+          const assigned = isRoleAssigned(role);
+          const toggling = togglingRoleId === role.id;
+
+          return (
+            <div
+              key={role.id}
+              className={`flex items-center justify-between p-3 rounded-md border transition-all ${
+                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={`rounded-md p-2 shrink-0 ${
+                    assigned ? 'bg-primary/10' : 'bg-muted'
+                  }`}
+                >
+                  <ShieldCheck
+                    className={`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">
+                      {getRoleDescription(role)}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <Switch
+                id={`role-${role.id}`}
+                checked={assigned}
+                disabled={toggling}
+                onCheckedChange={() => handleToggle(role.id, assigned)}
+                className="ml-4 shrink-0"
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+type TreeNode = {
+  id: number;
+  menu_id: number | null;
+  slug: string;
+  url: string;
+  icon: string | null;
+  order: number | null;
+  name?: string;
+  menu_locale?: Array<{ name?: string; locale?: { code: string } }>;
+  children: TreeNode[];
+};
+
+type MenuTreeDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  menus: TreeNode[];
+  onSaved: () => void;
+};
+
+type DropPosition = 'before' | 'inside' | 'after';
+
+type DropTarget = {
+  id: number;
+  parentId: number | null;
+  position: DropPosition;
+} | null;
+
+function buildTree(flat: TreeNode[]): TreeNode[] {
+  const map = new Map<number, TreeNode>();
+  flat.forEach((m) => map.set(m.id, { ...m, 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);
+    } else {
+      roots.push(node);
+    }
+  });
+  const sortByOrder = (arr: TreeNode[]): TreeNode[] =>
+    arr
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .map((n) => ({ ...n, children: sortByOrder(n.children) }));
+  return sortByOrder(roots);
+}
+
+function removeNodeFromTree(
+  nodes: TreeNode[],
+  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;
+        return false;
+      }
+      return true;
+    });
+    return filtered.map((n) => ({ ...n, children: process(n.children) }));
+  };
+  return { tree: process(nodes), removed };
+}
+
+function insertIntoTree(
+  nodes: TreeNode[],
+  node: TreeNode,
+  targetId: number,
+  position: DropPosition
+): TreeNode[] {
+  if (position === 'inside') {
+    return nodes.map((n) => {
+      if (n.id === targetId) {
+        return { ...n, children: [...n.children, node] };
+      }
+      return {
+        ...n,
+        children: insertIntoTree(n.children, node, targetId, position),
+      };
+    });
+  }
+
+  const idx = nodes.findIndex((n) => n.id === targetId);
+  if (idx !== -1) {
+    const result = [...nodes];
+    result.splice(position === 'before' ? idx : idx + 1, 0, node);
+    return result;
+  }
+
+  return nodes.map((n) => ({
+    ...n,
+    children: insertIntoTree(n.children, node, targetId, position),
+  }));
+}
+
+function isDescendantOf(
+  nodes: TreeNode[],
+  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;
+    }
+    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);
+}
+
+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));
+    }
+  };
+  traverse(nodes);
+  return groups;
+}
+
+function MenuTreeDialog({
+  open,
+  onClose,
+  menus,
+  onSaved,
+}: MenuTreeDialogProps) {
+  const t = useTranslations('core.MenuPage');
+  const { request } = useApp();
+
+  const [tree, setTree] = useState<TreeNode[]>([]);
+  const [saving, setSaving] = useState(false);
+  const [dragging, setDragging] = useState<{
+    id: number;
+    parentId: number | null;
+  } | null>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget>(null);
+
+  useEffect(() => {
+    if (open) {
+      setTree(buildTree(menus as TreeNode[]));
+    }
+  }, [open, menus]);
+
+  const getDisplayName = (node: TreeNode) =>
+    node.menu_locale?.[0]?.name ?? node.name ?? node.slug;
+
+  const handleDrop = async (target: DropTarget) => {
+    if (!target || !dragging || dragging.id === target.id) {
+      setDragging(null);
+      setDropTarget(null);
+      return;
+    }
+
+    if (
+      target.position === 'inside' &&
+      isDescendantOf(tree, dragging.id, target.id)
+    ) {
+      setDragging(null);
+      setDropTarget(null);
+      return;
+    }
+
+    const newParentId =
+      target.position === 'inside' ? target.id : target.parentId;
+    const oldParentId = dragging.parentId;
+    const draggedId = dragging.id;
+
+    const { tree: treeWithout, removed } = removeNodeFromTree(
+      tree,
+      dragging.id
+    );
+    if (!removed) {
+      setDragging(null);
+      setDropTarget(null);
+      return;
+    }
+
+    const newTree = insertIntoTree(
+      treeWithout,
+      removed,
+      target.id,
+      target.position
+    );
+    setTree(newTree);
+    setDragging(null);
+    setDropTarget(null);
+
+    setSaving(true);
+    try {
+      if (oldParentId !== newParentId) {
+        await request({
+          url: `/menu/${draggedId}`,
+          method: 'PATCH',
+          data: { menu_id: newParentId },
+        });
+      }
+
+      const groups = collectOrderGroups(newTree);
+      await Promise.all(
+        groups.map(({ ids }) =>
+          request({
+            url: '/menu/order',
+            method: 'PATCH',
+            data: { ids },
+          })
+        )
+      );
+
+      toast.success(t('treeOrderSaved'));
+      onSaved();
+    } catch {
+      toast.error(t('treeOrderError'));
+      setTree(buildTree(menus as TreeNode[]));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const renderNode = (
+    node: TreeNode,
+    parentId: number | null,
+    depth = 0
+  ): React.ReactNode => {
+    const isDraggingThis = dragging?.id === node.id;
+    const isTarget = dropTarget?.id === node.id;
+    const isBefore = isTarget && dropTarget?.position === 'before';
+    const isAfter = isTarget && dropTarget?.position === 'after';
+    const isInside = isTarget && dropTarget?.position === 'inside';
+
+    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">
+            {node.children.map((child) =>
+              renderNode(child, node.id, depth + 1)
+            )}
+          </div>
+        )}
+      </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>
+          ) : (
+            tree.map((node) => renderNode(node, null, 0))
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+type MenuLocale = {
+  name: string;
+};
+
+type MenuItem = {
+  id: number;
+  menu_id: number | null;
+  slug: string;
+  url: string;
+  icon: string | null;
+  order: number | null;
+  menu_locale?: Array<{
+    name?: string;
+    locale?: { code: string };
+  }>;
+  name?: string;
+  locale?: Record<string, MenuLocale>;
+};
+
+type MenuStats = {
+  total: number;
+};
+
+const NO_PARENT = '__none__';
+
+export default function MenuPage() {
+  const t = useTranslations('core.MenuPage');
+  const { request, currentLocaleCode, locales } = useApp();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isTreeOpen, setIsTreeOpen] = useState(false);
+  const [editingMenu, setEditingMenu] = useState<MenuItem | null>(null);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [editFormError, setEditFormError] = useState<string | null>(null);
+  const [openDeleteModal, setOpenDeleteModal] = useState(false);
+  const [selectedLocale, setSelectedLocale] = useState(currentLocaleCode);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  const { data: allMenus } = useQuery<MenuItem[]>({
+    queryKey: ['menus-all', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<MenuItem[]>({
+        url: `/menu/all`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    enabled: true,
+  });
+
+  const { data: menuStats } = useQuery<MenuStats>({
+    queryKey: ['menus-stats'],
+    queryFn: async () => {
+      const response = await request<MenuStats>({
+        url: `/menu/stats`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const {
+    data: menusResponse,
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResponse<MenuItem>>({
+    queryKey: ['menus', page, pageSize, searchQuery, currentLocaleCode],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (searchQuery) params.set('search', searchQuery);
+
+      const response = await request<PaginatedResponse<MenuItem>>({
+        url: `/menu?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const addMenuSchema = z.object({
+    slug: z.string().min(2, t('errorSlug')),
+    url: z.string().min(1, t('errorUrl')),
+    name: z.string().optional(),
+    icon: z.string().optional(),
+    order: z.coerce.number().int().min(1).optional(),
+    menu_id: z.string().optional(),
+  });
+
+  const editMenuSchema = z.object({
+    slug: z.string().min(2, t('errorSlug')),
+    url: z.string().min(1, t('errorUrl')),
+    icon: z.string().optional(),
+    order: z.coerce.number().int().min(1).optional(),
+    menu_id: z.string().optional(),
+    name: z.string().optional(),
+  });
+
+  const form = useForm<z.infer<typeof addMenuSchema>>({
+    resolver: zodResolver(addMenuSchema),
+    defaultValues: {
+      slug: '',
+      url: '',
+      name: '',
+      icon: '',
+      order: undefined,
+      menu_id: NO_PARENT,
+    },
+  });
+
+  const editForm = useForm<z.infer<typeof editMenuSchema>>({
+    resolver: zodResolver(editMenuSchema),
+    defaultValues: {
+      slug: '',
+      url: '',
+      icon: '',
+      order: undefined,
+      menu_id: NO_PARENT,
+      name: '',
+    },
+  });
+
+  useEffect(() => {
+    if (editingMenu) {
+      const localeData = editingMenu.locale?.[selectedLocale];
+      editForm.setValue('name', localeData?.name ?? '');
+    }
+  }, [selectedLocale, editingMenu?.id]);
+
+  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 || '',
+      });
+    }
+  }, [editingMenu?.id]);
+
+  const onSubmit = async (values: z.infer<typeof addMenuSchema>) => {
+    try {
+      const localePayload: Record<string, string> = {};
+      if (values.name) {
+        localePayload[currentLocaleCode] = values.name;
+      }
+
+      await request({
+        url: '/menu',
+        method: 'POST',
+        data: {
+          slug: values.slug,
+          url: values.url,
+          icon: values.icon || undefined,
+          order: values.order || undefined,
+          menu_id:
+            values.menu_id && values.menu_id !== NO_PARENT
+              ? Number(values.menu_id)
+              : undefined,
+          ...(Object.keys(localePayload).length > 0
+            ? { locale: localePayload }
+            : {}),
+        },
+      });
+
+      form.reset({
+        slug: '',
+        url: '',
+        name: '',
+        icon: '',
+        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'));
+    }
+  };
+
+  const onEditSubmit = async (values: z.infer<typeof editMenuSchema>) => {
+    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({
+        url: `/menu/${editingMenu.id}`,
+        method: 'PATCH',
+        data: {
+          slug: values.slug,
+          url: values.url,
+          icon: values.icon || undefined,
+          order: values.order || undefined,
+          menu_id:
+            values.menu_id && values.menu_id !== NO_PARENT
+              ? Number(values.menu_id)
+              : null,
+          locale: localePayload,
+        },
+      });
+
+      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));
+    }
+  };
+
+  const onDelete = async () => {
+    try {
+      await request({
+        url: `/menu`,
+        method: 'DELETE',
+        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));
+    }
+  };
+
+  const getMenuDisplayName = (menu: MenuItem) => menu.name || menu.slug;
+  const parentMenuOptions = (allMenus ?? []).filter(
+    (m) => m.id !== editingMenu?.id
+  );
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <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),
+            variant: 'default',
+          },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <StatsCards
+        className="sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1"
+        stats={[
+          {
+            title: t('totalMenus'),
+            value: String(menuStats?.total ?? 0),
+            icon: <Menu className="h-5 w-5" />,
+            iconBgColor: 'bg-blue-50',
+            iconColor: 'text-blue-600',
+          },
+        ]}
+      />
+
+      <SearchBar
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        onSearch={() => refetch()}
+        placeholder={t('searchPlaceholder')}
+        className="mt-4"
+      />
+
+      <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) => (
+              <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"
+              >
+                <CardHeader className="p-0">
+                  <div className="space-y-2">
+                    <div className="h-4 w-40 rounded bg-muted" />
+                    <div className="h-3 w-32 rounded bg-muted" />
+                  </div>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {!isLoading &&
+        (!menusResponse?.data || menusResponse.data.length === 0) ? (
+          <p className="text-sm text-muted-foreground">{t('noMenusFound')}</p>
+        ) : (
+          <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>
+                        )}
+                        {menu.menu_id != null && (
+                          <Badge
+                            variant="outline"
+                            className="text-xs px-1.5 py-0"
+                          >
+                            {t('subMenu')}
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleEdit(menu)}
+                  >
+                    {t('buttonEditMenu')}
+                  </Button>
+                </CardHeader>
+              </Card>
+            ))}
+          </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>
+
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>{t('dialogAddMenuTitle')}</DialogTitle>
+              <DialogDescription>
+                {t('dialogAddMenuDescription')}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="w-full border-t pt-1 mt-1" />
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-4"
+              >
+                <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="icon"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>{t('formIconLabel')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t('formIconPlaceholder')}
+                            {...field}
+                          />
+                        </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')}
+                          </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>
+                )}
+
+                <Button type="submit" className="w-full">
+                  <Plus className="h-4 w-4 mr-1" />
+                  {t('buttonAddMenu')}
+                </Button>
+              </form>
+            </Form>
+          </DialogContent>
+        </Dialog>
+
+        {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>
+        )}
+
+        <Dialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>
+          <DialogContent className="sm:max-w-lg">
+            <DialogHeader>
+              <DialogTitle>{t('dialogDeleteMenuTitle')}</DialogTitle>
+              <DialogDescription>
+                {t('dialogDeleteMenuDescription')}
+              </DialogDescription>
+            </DialogHeader>
+            <hr className="mt-4" />
+            <div className="flex justify-end">
+              <Button
+                type="button"
+                className="px-4 w-28 h-12 py-2 bg-gray-300 text-black hover:bg-gray-300 hover:text-black rounded-sm mr-2 text-md"
+                onClick={() => setOpenDeleteModal(false)}
+              >
+                {t('deleteMenuCancel')}
+              </Button>
+              <Button
+                onClick={onDelete}
+                variant="destructive"
+                className="px-4 w-32 h-12 py-2 text-white hover:text-white rounded-sm text-md cursor-pointer"
+              >
+                {t('deleteMenuConfirm')}
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        <MenuTreeDialog
+          open={isTreeOpen}
+          onClose={() => setIsTreeOpen(false)}
+          menus={(allMenus ?? []) as TreeNode[]}
+          onSaved={() => {
+            refetch();
+          }}
+        />
+      </div>
+    </div>
+  );
+}