Default Component - Copy this React, Tailwind Component to your project

خوب عالیه الان بیا و بگو منو رو از بک اند بگیره نمایش بده کدش رو برات میفرستم خودت مرتبش کنimport { useState, useEffect } from "react"; import { IRoute } from "./types/navigation"; interface ApiResponse { hasError: boolean; hasSqlException: boolean; stackTrace: string | null; errorMessage: string | null; tableColumns: string[]; dataSet: string[]; } interface MenuItem { id: number; onvan: string; parent_id: number; url: string | null; } /** * تابع buildMenuTree یک درخت منو از آرایه مسطح menuItems می‌سازد. */ const buildMenuTree = (menuItems: MenuItem[]): IRoute[] => { // ایجاد نودهای اصلی برای هر آیتم دریافت شده const nodeMap = new Map<number, IRoute & { children: IRoute[] }>(); menuItems.forEach((item) => { nodeMap.set(item.id, { name: item.onvan, layout: "/admin", // یا هر layout دلخواه icon: "", // در صورت نیاز می‌توانید آیکون مناسب اختصاص دهید path: item.url || "#", children: [], }); }); // آرایه ریشه‌ها (منوی اصلی) const roots: (IRoute & { children: IRoute[] })[] = []; // نگهدارنده دسته‌های مجازی (برای مواردی که پدر واقعی وجود ندارد) const dummyMap = new Map<number, IRoute & { children: IRoute[] }>(); // ساخت درخت منو با بررسی parent_id هر آیتم menuItems.forEach((item) => { const node = nodeMap.get(item.id)!; if (nodeMap.has(item.parent_id)) { // اگر آیتم پدر وجود دارد، به عنوان فرزند اضافه می‌شود nodeMap.get(item.parent_id)!.children.push(node); } else { if (item.parent_id && item.parent_id !== 0) { // در صورتی که پدر واقعی وجود ندارد، از یک نود مجازی استفاده می‌کنیم if (!dummyMap.has(item.parent_id)) { dummyMap.set(item.parent_id, { name: `گروه ${item.parent_id}`, layout: "/admin", icon: "", path: "#", children: [], }); roots.push(dummyMap.get(item.parent_id)!); } dummyMap.get(item.parent_id)!.children.push(node); } else { // اگر parent_id صفر یا null است، آیتم به عنوان ریشه در نظر گرفته می‌شود roots.push(node); } } }); return roots; }; /** * هوک useMenuRoutes: * - داده‌های منو را از API دریافت می‌کند. * - اطلاعات دریافتی را در کنسول لاگ می‌کند. * - درخت منو را می‌سازد و آن را در state ذخیره می‌کند. */ export const useMenuRoutes = (id_user: string = "1", active_menu: string = "1") => { const [routes, setRoutes] = useState<IRoute[]>([]); useEffect(() => { const fetchMenu = async () => { try { const response = await fetch("https://localhost:7221/SP_Get_Menu_Access", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id_user, active_menu }), }); const data: ApiResponse = await response.json(); console.log("API Response:", data); if (!data.hasError && data.dataSet.length > 0) { // dataSet[0] حاوی یک رشته JSON است که آرایه‌ای از ردیف‌ها را نگه می‌دارد const rows: any[] = JSON.parse(data.dataSet[0]); console.log("Parsed Rows:", rows); // فرض بر این است که ساختار هر ردیف به صورت زیر است: // [radif, id, onvan, parent_id, url, ...] const menuItems: MenuItem[] = rows.map((row) => ({ id: Number(row[1]), onvan: row[2], parent_id: Number(row[3]), url: row[4] ? row[4] : "#", })); console.log("Menu Items:", menuItems); const menuTree = buildMenuTree(menuItems); console.log("Built Menu Tree:", menuTree); setRoutes(menuTree); } } catch (error) { console.error("Error fetching menu:", error); } }; fetchMenu(); }, [id_user, active_menu]); return routes; };