import React from "react" import { Head, Form } from "@inertiajs/react" import AppLayout from "@/layouts/app-layout" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { ArrowLeft } from "lucide-react" import { type BreadcrumbItem } from "@/types" import { AcademicsLevel } from "@/types/admin/AcademicsLevel" import { MenuSetting } from "@/types/admin/MenuSetting" import { index, store } from "@/routes/admin/menu-setting" import { FacilityCategory } from "@/types/admin/Facility" import { PageCategory } from "@/types/admin/Page" interface Props { academics: AcademicsLevel[] facilities: FacilityCategory[] menuSettings: MenuSetting[] pages: PageCategory[] menuTypes: Record staticPages: Record // { about: "About Us", contact: "Contact" } staticPageSlugs: Record // { about: "/about-us", contact: "/contact" } } const breadcrumbs: BreadcrumbItem[] = [ { title: "Menu Setting", href: index().url }, { title: "Create", href: "#" }, ] export default function MenuSettingCreate({ academics, facilities, menuSettings, pages, menuTypes, staticPages, staticPageSlugs, }: Props) { // STATE const [menuType, setMenuType] = React.useState("") const [menuableId, setMenuableId] = React.useState("") const [menuableKey, setMenuableKey] = React.useState("") const [slugValue, setSlugValue] = React.useState("") // When user changes menu type const handleMenuTypeChange = (value: string) => { setMenuType(value) setMenuableId("") setMenuableKey("") setSlugValue("") if (value === "static") { // auto-select first static page key (optional) const firstKey = Object.keys(staticPageSlugs)[0] setMenuableKey(firstKey) setSlugValue(staticPageSlugs[firstKey]) } } // When user selects static page, set slug to that page's slug React.useEffect(() => { if (menuType === "static" && menuableKey) { setSlugValue(staticPageSlugs[menuableKey] || "") } // NOTE: we intentionally DO NOT auto-set slug for category to keep it editable. }, [menuType, menuableKey, staticPageSlugs]) const handleCancel = () => window.history.back() return (
{/* HEADER */}

Create Menu Setting

Add a new menu setting.

{/* FORM */} Menu Details
{({ errors }: { errors: Record }) => ( <>
{/* Parent Menu */}
{errors?.menu_id && (

{errors.menu_id}

)}
{/* Menu Name */}
{errors?.title &&

{errors.title}

}
{/* SLUG AREA - will be either readonly (static) or editable (category/other) */} {menuType !== "parent" && (
{menuType === "static" ? ( ) : ( setSlugValue(e.target.value)} placeholder="enter slug" /> )} {errors?.slug &&

{errors.slug}

}
)} {/* Menu Type */}
{errors?.menu_type && (

{errors.menu_type}

)}
{/* Category Field (menuable_id) */} {menuType === "academic" && (
{errors?.menuable_id && (

{errors.menuable_id}

)}
)} {menuType === "page" && (
{errors?.menuable_id && (

{errors.menuable_id}

)}
)} {menuType === "facility" && (
{errors?.menuable_id && (

{errors.menuable_id}

)}
)} {/* Static Page Field (menuable_key) */} {menuType === "static" && (
{errors?.menuable_key && (

{errors.menuable_key}

)}
)} {/* Position */}
{errors?.position && (

{errors.position}

)}
{/* Buttons */}
)}
) }