1 files changed, 49 insertions, 0 deletions
diff --git a/hooks/use-visible-menu-tree.ts b/hooks/use-visible-menu-tree.ts
new file mode 100644
index 00000000..bc7f1f73
--- /dev/null
+++ b/hooks/use-visible-menu-tree.ts
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { getVisibleMenuTree } from "@/lib/menu-v2/permission-service";
+import type { MenuDomain, MenuTreeNode, MenuTreeActiveResult } from "@/lib/menu-v2/types";
+
+interface UseVisibleMenuTreeResult extends MenuTreeActiveResult {
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Hook to fetch user's visible menu tree (filtered by permissions)
+ * Tree contains both menu groups (dropdowns) and top-level menus (single links)
+ */
+export function useVisibleMenuTree(domain: MenuDomain): UseVisibleMenuTreeResult {
+  const [tree, setTree] = useState<MenuTreeNode[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchMenuTree = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      // Call server action directly
+      const result = await getVisibleMenuTree(domain);
+      setTree(result.tree);
+    } catch (err) {
+      console.error("Error fetching visible menu tree:", err);
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+      setTree([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [domain]);
+
+  useEffect(() => {
+    fetchMenuTree();
+  }, [fetchMenuTree]);
+
+  return {
+    tree,
+    isLoading,
+    error,
+    refetch: fetchMenuTree,
+  };
+}