import AppLayout from '@/layouts/app-layout' import { Button } from '@/components/ui/button' import { PaginatedData, type BreadcrumbItem } from '@/types' import { Head, Link } from '@inertiajs/react' import { Plus } from 'lucide-react' import { DataTable } from '@/components/DataTable' import Pagination from '@/components/Pagination' import FlashToast from '@/components/FlashToast' import { columns } from './columns' import { MenuSetting } from '@/types/admin/MenuSetting' import { create, index } from '@/routes/admin/menu-setting' interface Props { menuSettings: PaginatedData } // Build nested structure function buildNestedMenus( menus: MenuSetting[], parentId: number | null = null, level = 0 ): (MenuSetting & { level: number; children?: any[] })[] { return menus .filter((m) => m.menu_id === parentId) .map((m) => ({ ...m, level, children: buildNestedMenus(menus, m.id, level + 1), })) } // Flatten nested menus for table function flattenNestedMenus( nestedMenus: (MenuSetting & { level: number; children?: any[] })[] ): (MenuSetting & { level: number })[] { let result: (MenuSetting & { level: number })[] = [] nestedMenus.forEach((m) => { result.push({ ...m, children: undefined }) if (m.children && m.children.length > 0) { result.push(...flattenNestedMenus(m.children)) } }) return result } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Menu Setting', href: index().url, }, ] export default function Index({ menuSettings }: Props) { FlashToast() // Build nested -> flatten const nestedMenus = buildNestedMenus(menuSettings.data) const tableData = flattenNestedMenus(nestedMenus) return (

Menu Setting Details

Manage Menu Setting Details here.

) }