create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/navigation/actions.ts

@@ -0,0 +1,358 @@
+// app/cms/navigation/actions.ts
+"use server";
+
+import { createClient } from "@nextblock-cms/db/server";
+import { revalidatePath, unstable_noStore } from "next/cache";
+import { redirect } from "next/navigation";
+import type { Database } from "@nextblock-cms/db";
+import { v4 as uuidv4 } from 'uuid';
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+type MenuLocation = Database['public']['Enums']['menu_location'];
+
+// Helper to check admin role
+async function isAdminUser(supabase: ReturnType<typeof createClient>): Promise<boolean> {
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return false;
+  const { data: profile } = await supabase
+    .from("profiles")
+    .select("role")
+    .eq("id", user.id)
+    .single();
+  return profile?.role === "ADMIN";
+}
+
+type UpsertNavigationItemPayload = {
+  language_id: number;
+  menu_key: MenuLocation;
+  label: string;
+  url: string;
+  parent_id?: number | null;
+  order?: number;
+  page_id?: number | null;
+  translation_group_id: string;
+};
+
+// Helper to generate a placeholder label for new translations
+function generatePlaceholderLabel(originalLabel: string, langCode: string): string {
+  return `[${langCode.toUpperCase()}] ${originalLabel}`;
+}
+
+
+export async function createNavigationItem(formData: FormData) {
+  const supabase = createClient();
+
+  if (!(await isAdminUser(supabase))) {
+    return { error: "Unauthorized: Admin role required." };
+  }
+
+  const fromGroupId = formData.get("from_translation_group_id") as string | null;
+  const targetLangIdForTranslation = formData.get("target_language_id_for_translation") as string | null;
+  const initialMenuKeyFromParam = formData.get("menu_key_from_param") as MenuLocation | null; // Capture if passed for new translation
+
+
+  const rawFormData = {
+    label: formData.get("label") as string,
+    url: formData.get("url") as string,
+    language_id: parseInt(formData.get("language_id") as string, 10),
+    menu_key: (initialMenuKeyFromParam || formData.get("menu_key")) as MenuLocation,
+    order: parseInt(formData.get("order") as string, 10) || 0,
+    parent_id: formData.get("parent_id") && formData.get("parent_id") !== "___NONE___" ? parseInt(formData.get("parent_id") as string, 10) : null,
+    page_id: formData.get("page_id") && formData.get("page_id") !== "___NONE___" ? parseInt(formData.get("page_id") as string, 10) : null,
+  };
+
+  if (!rawFormData.label || !rawFormData.url || isNaN(rawFormData.language_id) || !rawFormData.menu_key) {
+    return { error: "Missing required fields: label, URL, language, or menu key." };
+  }
+
+  const translationGroupId = fromGroupId || uuidv4();
+
+  const navData: UpsertNavigationItemPayload = {
+    ...rawFormData,
+    translation_group_id: translationGroupId,
+  };
+
+  const { data: newNavItem, error } = await supabase
+    .from("navigation_items")
+    .insert(navData)
+    .select()
+    .single();
+
+  if (error) {
+    console.error("Error creating navigation item:", error);
+    return { error: `Failed to create item: ${error.message}` };
+  }
+
+  let successMessage = "Navigation item created successfully.";
+
+  if (newNavItem && !fromGroupId && !targetLangIdForTranslation) {
+    // Get other languages to create placeholder translations
+    const { data: languages, error: langError } = await supabase
+      .from("languages")
+      .select("id, code")
+      .neq("id", newNavItem.language_id);
+
+    if (langError) {
+      console.error("Error fetching other languages for nav item auto-creation:", langError);
+    } else if (languages && languages.length > 0) {
+      let parentTranslationGroupId: string | null = null;
+      if (newNavItem.parent_id) {
+        const { data: parentItem, error: parentError } = await supabase
+          .from("navigation_items")
+          .select("translation_group_id")
+          .eq("id", newNavItem.parent_id)
+          .single();
+        if (parentError) {
+          console.error(`Error fetching parent translation group ID:`, parentError);
+        } else {
+          parentTranslationGroupId = parentItem.translation_group_id;
+        }
+      }
+
+      let pageTranslationGroupId: string | null = null;
+      if (newNavItem.page_id) {
+        const { data: linkedPage, error: pageError } = await supabase
+          .from("pages")
+          .select("translation_group_id")
+          .eq("id", newNavItem.page_id)
+          .single();
+        if (pageError) {
+          console.error(`Error fetching page translation group ID:`, pageError);
+        } else if (linkedPage) {
+          pageTranslationGroupId = linkedPage.translation_group_id;
+        }
+      }
+
+      let placeholderCreations = 0;
+      for (const lang of languages) {
+        let translatedParentId: number | null = null;
+        if (parentTranslationGroupId) {
+          const { data: translatedParent } = await supabase
+            .from("navigation_items")
+            .select("id")
+            .eq("translation_group_id", parentTranslationGroupId)
+            .eq("language_id", lang.id)
+            .single();
+          if (translatedParent) {
+            translatedParentId = translatedParent.id;
+          }
+        }
+
+        let translatedPageId: number | null = null;
+        if (pageTranslationGroupId) {
+        const { data: translatedPage } = await supabase
+          .from("pages")
+          .select("id")
+          .eq("translation_group_id", pageTranslationGroupId)
+          .eq("language_id", lang.id)
+          .single();
+          if (translatedPage) {
+            translatedPageId = translatedPage.id;
+          }
+        }
+
+        const placeholderNavItemData: UpsertNavigationItemPayload = {
+          language_id: lang.id,
+          menu_key: newNavItem.menu_key,
+          label: generatePlaceholderLabel(newNavItem.label, lang.code),
+          url: newNavItem.url,
+          parent_id: translatedParentId,
+          order: newNavItem.order,
+          page_id: translatedPageId,
+          translation_group_id: newNavItem.translation_group_id,
+        };
+
+        const { error: placeholderError } = await supabase.from("navigation_items").insert(placeholderNavItemData);
+        if (placeholderError) {
+          console.error(`Error auto-creating nav item for language ${lang.code}:`, placeholderError);
+        } else {
+          placeholderCreations++;
+        }
+      }
+
+      if (placeholderCreations > 0) {
+        successMessage += ` ${placeholderCreations} translated version(s) also created (please edit their details).`;
+      }
+    }
+  }
+
+
+  revalidatePath("/cms/navigation");
+  if (newNavItem?.id) {
+    revalidatePath(`/cms/navigation/${newNavItem.id}/edit`);
+    redirect(`/cms/navigation/${newNavItem.id}/edit?success=${encodeURIComponent(successMessage)}`);
+  } else {
+    redirect(`/cms/navigation?success=${encodeURIComponent(successMessage)}`);
+  }
+}
+
+export async function updateNavigationItem(itemId: number, formData: FormData) {
+  const supabase = createClient();
+
+  if (!(await isAdminUser(supabase))) {
+    return { error: "Unauthorized: Admin role required." };
+  }
+  const { data: existingItem, error: fetchError } = await supabase
+    .from("navigation_items")
+    .select("translation_group_id, language_id")
+    .eq("id", itemId)
+    .single();
+
+  if (fetchError || !existingItem) {
+    return { error: "Original navigation item not found or error fetching it." };
+  }
+
+  const rawFormData = {
+    label: formData.get("label") as string,
+    url: formData.get("url") as string,
+    language_id: parseInt(formData.get("language_id") as string, 10),
+    menu_key: formData.get("menu_key") as MenuLocation,
+    order: parseInt(formData.get("order") as string, 10) || 0,
+    parent_id: formData.get("parent_id") && formData.get("parent_id") !== "___NONE___" ? parseInt(formData.get("parent_id") as string, 10) : null,
+    page_id: formData.get("page_id") && formData.get("page_id") !== "___NONE___" ? parseInt(formData.get("page_id") as string, 10) : null,
+  };
+
+   if (!rawFormData.label || !rawFormData.url || isNaN(rawFormData.language_id) || !rawFormData.menu_key) {
+     return { error: "Missing required fields: label, URL, language, or menu key." };
+  }
+
+  if (rawFormData.language_id !== existingItem.language_id) {
+      return { error: "Changing the language of an existing navigation item version is not allowed. Create a new translation instead." };
+  }
+
+  const navData: Partial<Omit<UpsertNavigationItemPayload, 'translation_group_id'>> = {
+    ...rawFormData,
+  };
+
+  const { error } = await supabase
+    .from("navigation_items")
+    .update(navData)
+    .eq("id", itemId);
+
+  if (error) {
+    console.error("Error updating navigation item:", error);
+    return { error: `Failed to update item: ${error.message}` };
+  }
+
+  revalidatePath("/cms/navigation");
+  revalidatePath(`/cms/navigation/${itemId}/edit`);
+  redirect(`/cms/navigation/${itemId}/edit?success=Item updated successfully`);
+}
+
+export async function deleteNavigationItem(itemId: number) {
+  const supabase = createClient();
+
+  if (!(await isAdminUser(supabase))) {
+    return { error: "Unauthorized: Admin role required." };
+  }
+
+  // First, get the translation_group_id for the item being deleted
+  const { data: itemToDelete, error: fetchError } = await supabase
+    .from("navigation_items")
+    .select("translation_group_id")
+    .eq("id", itemId)
+    .single();
+
+  if (fetchError || !itemToDelete) {
+    console.error("Error finding navigation item to delete:", fetchError);
+    return { error: "Failed to find the navigation item to delete." };
+  }
+
+  const { translation_group_id } = itemToDelete;
+
+  if (!translation_group_id) {
+    console.error("Navigation item is missing a translation_group_id:", itemId);
+    return { error: "Cannot delete item as it is missing translation information." };
+  }
+
+  // Now, delete all items in the same translation group
+  const { error: deleteError } = await supabase
+    .from("navigation_items")
+    .delete()
+    .eq("translation_group_id", translation_group_id);
+
+  if (deleteError) {
+    console.error("Error deleting navigation item and its translations:", deleteError);
+    return { error: `Failed to delete item and its translations: ${deleteError.message}` };
+  }
+
+  revalidatePath("/cms/navigation");
+
+  return { success: true };
+}
+
+
+export async function updateNavigationStructureBatch(
+  itemsToUpdate: Array<{ id: number; order: number; parent_id: number | null; }>
+) {
+  const supabase = createClient();
+  if (!(await isAdminUser(supabase))) {
+    return { error: "Unauthorized: Admin role required for batch update." };
+  }
+
+  if (!itemsToUpdate || itemsToUpdate.length === 0) {
+    return { error: "No items provided for update." };
+  }
+
+  // Supabase JS v2 doesn't have built-in transactions for multiple upserts like this directly.
+  // You'd typically loop and perform individual updates.
+  // If one fails, others might have succeeded. Consider rollback strategy if needed (more complex).
+  let CmsNavigationListPageFailedUpdates = 0;
+  for (const item of itemsToUpdate) {
+    const { error } = await supabase
+      .from("navigation_items")
+      .update({
+        order: item.order,
+        parent_id: item.parent_id,
+        updated_at: new Date().toISOString(), // Also update updated_at
+      })
+      .eq("id", item.id);
+
+    if (error) {
+      console.error(`Error updating nav item ${item.id}:`, error.message);
+      CmsNavigationListPageFailedUpdates++;
+    }
+  }
+
+  if (CmsNavigationListPageFailedUpdates > 0) {
+    return { error: `Failed to update ${CmsNavigationListPageFailedUpdates} item(s). Some changes might not have been saved.` };
+  }
+
+  revalidatePath("/cms/navigation");
+  // No redirect needed here, as this is likely called via client-side transition
+  return { success: true, message: "Navigation structure updated." };
+}
+
+
+// Fetches navigation items for a specific menu and language (used by public site Header/Footer)
+export async function getNavigationMenu(menuKey: MenuLocation, languageCode: string): Promise<NavigationItem[]> {
+  const supabase = createClient(); // server client
+  unstable_noStore(); // Opt out of caching for this function
+
+  const { data: language, error: langError } = await supabase
+    .from("languages")
+    .select("id")
+    .eq("code", languageCode)
+    .single();
+
+  if (langError || !language) {
+    console.error(`Error fetching language ID for code ${languageCode} in getNavigationMenu:`, langError);
+    return [];
+  }
+
+  const languageId = language.id;
+
+  const { data: items, error: itemsError } = await supabase
+    .from("navigation_items")
+    .select("*, pages(slug)") // Select all fields, including translation_group_id and linked page slug
+    .eq("menu_key", menuKey)
+    .eq("language_id", languageId)
+    .order("parent_id", { nullsFirst: true })
+    .order("order");
+
+  if (itemsError) {
+    console.error(`Error fetching navigation items for ${menuKey} (${languageCode}):`, itemsError);
+    return [];
+  }
+  return (items || []).map(item => ({...item, id: Number(item.id)}));
+}

package/templates/nextblock-template/app/cms/navigation/components/DeleteNavItemButton.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { Trash2 } from "lucide-react";
+import { deleteNavigationItem } from "../actions";
+import { ConfirmationModal } from "../../components/ConfirmationModal";
+
+interface DeleteNavItemButtonProps {
+  itemId: number;
+}
+
+export default function DeleteNavItemButton({ itemId }: DeleteNavItemButtonProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onConfirm = async () => {
+    try {
+      const result = await deleteNavigationItem(itemId);
+      if (result.success) {
+        window.location.reload();
+      } else {
+        console.error("Delete operation failed:", result.error);
+      }
+    } catch (error) {
+      console.error("Exception during delete action:", error);
+    } finally {
+      setIsModalOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenuItem
+        className="text-red-600 hover:!text-red-600 hover:!bg-red-50 dark:hover:!bg-red-700/20"
+        onSelect={(e) => {
+          e.preventDefault();
+          setIsModalOpen(true);
+        }}
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        Delete
+      </DropdownMenuItem>
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={onConfirm}
+        title="Are you sure?"
+        description="This will permanently delete the navigation item. This action cannot be undone."
+      />
+    </>
+  );
+}

package/templates/nextblock-template/app/cms/navigation/components/NavigationItemForm.tsx

@@ -0,0 +1,248 @@
+// app/cms/navigation/components/NavigationItemForm.tsx
+"use client";
+
+import React, { useEffect, useState, useTransition } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@nextblock-cms/ui";
+import type { Database } from "@nextblock-cms/db";
+import { useAuth } from "@/context/AuthContext";
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+type MenuLocation = Database['public']['Enums']['menu_location'];
+type Language = Database['public']['Tables']['languages']['Row'];
+type Page = Database['public']['Tables']['pages']['Row'];
+
+interface NavigationItemFormProps {
+  item?: NavigationItem | null;
+  formAction: (formData: FormData) => Promise<{ error?: string } | void>;
+  actionButtonText?: string;
+  isEditing?: boolean;
+  languages: Language[];
+  parentItems: (Pick<NavigationItem, 'id' | 'label' | 'translation_group_id' | 'language_id' | 'parent_id'> & { menu_key: MenuLocation | null })[];
+  pages: Pick<Page, 'id' | 'title' | 'slug' | 'language_id'>[];
+}
+
+export default function NavigationItemForm({
+  item,
+  formAction,
+  actionButtonText = "Save Item",
+  isEditing = false,
+  languages,
+  parentItems,
+  pages,
+}: NavigationItemFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+  const { isAdmin, isLoading: authLoading } = useAuth();
+
+  // For creating a new translation based on an existing item
+  const fromTranslationGroupId = searchParams.get("from_translation_group_id");
+  const targetLanguageIdForTranslation = searchParams.get("target_language_id_for_translation");
+  const initialMenuKeyFromParam = searchParams.get("menu_key") as MenuLocation | null;
+  const originalLabelFromParam = searchParams.get("original_label");
+
+
+  const [label, setLabel] = useState(item?.label || (originalLabelFromParam ? `[Translate] ${originalLabelFromParam}` : ""));
+  const [url, setUrl] = useState(item?.url || (originalLabelFromParam ? "#" : "")); // Default to # if translating
+  const [languageId, setLanguageId] = useState<string>(
+    targetLanguageIdForTranslation || item?.language_id?.toString() || ""
+  );
+  const [menuKey, setMenuKey] = useState<MenuLocation | "">(
+    initialMenuKeyFromParam || item?.menu_key || "HEADER"
+  );
+  const [order, setOrder] = useState<string>(item?.order?.toString() || "0");
+  const [parentId, setParentId] = useState<string>(item?.parent_id?.toString() || "");
+  const [pageId, setPageId] = useState<string>(item?.page_id?.toString() || "");
+
+  const [availableLanguages] = useState<Language[]>(languages);
+  const [availablePages, setAvailablePages] = useState<Pick<Page, 'id' | 'title' | 'slug'>[]>([]);
+  const [availableParentItems, setAvailableParentItems] = useState<(Pick<NavigationItem, 'id' | 'label' | 'translation_group_id'> & { menu_key: MenuLocation | null })[]>([]);
+  const [dataLoading] = useState(false);
+  const [formMessage, setFormMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    const successMessage = searchParams.get('success');
+    const errorMessage = searchParams.get('error');
+    if (successMessage) setFormMessage({ type: 'success', text: decodeURIComponent(successMessage) });
+    else if (errorMessage) setFormMessage({ type: 'error', text: decodeURIComponent(errorMessage) });
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (!isEditing && !languageId && !targetLanguageIdForTranslation && languages.length > 0) {
+      const defaultLang = languages.find(l => l.is_default) || languages[0];
+      if (defaultLang) setLanguageId(defaultLang.id.toString());
+    }
+  }, [isEditing, languageId, targetLanguageIdForTranslation, languages]);
+
+  useEffect(() => {
+    const currentLangId = languageId ? parseInt(languageId, 10) : null;
+    if (currentLangId) {
+      const filteredPages = pages.filter(p => p.language_id === currentLangId);
+      setAvailablePages(filteredPages);
+
+      const filteredParentItems = parentItems.filter(p => p.language_id === currentLangId && p.id !== item?.id);
+      setAvailableParentItems(filteredParentItems);
+    } else {
+      setAvailablePages([]);
+      setAvailableParentItems([]);
+    }
+  }, [languageId, pages, parentItems, item?.id]);
+
+  const handlePageSelect = (selectedPageId: string) => {
+    setPageId(selectedPageId);
+    const selectedPage = availablePages.find(p => p.id.toString() === selectedPageId);
+    if (selectedPage) {
+      setUrl(`/${selectedPage.slug}`);
+    } else if (selectedPageId === "___NONE___") {
+      setUrl("#"); // Reset URL if "None" is selected, or keep previous manual URL
+    }
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setFormMessage(null);
+    const formData = new FormData(event.currentTarget);
+
+    // Append translation group ID if creating a new translation from an existing group
+    if (fromTranslationGroupId && !isEditing) {
+        formData.append("from_translation_group_id", fromTranslationGroupId);
+    }
+    if (targetLanguageIdForTranslation && !isEditing) {
+        formData.append("target_language_id_for_translation", targetLanguageIdForTranslation);
+    }
+
+
+    startTransition(async () => {
+      const result = await formAction(formData);
+      if (result?.error) setFormMessage({ type: 'error', text: result.error });
+    });
+  };
+
+  if (authLoading || !isAdmin) {
+    return <div>Access Denied. Admin role required.</div>;
+  }
+  if (dataLoading && !item) return <div>Loading form data...</div>; // Show loading only if not editing an existing item with data
+
+  const menuLocations: MenuLocation[] = ['HEADER', 'FOOTER', 'SIDEBAR'];
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {formMessage && (
+        <div className={`p-3 rounded-md text-sm ${formMessage.type === 'success' ? 'bg-green-100 text-green-700 border border-green-200' : 'bg-red-100 text-red-700 border border-red-200'}`}>
+          {formMessage.text}
+        </div>
+      )}
+
+      {/* Hidden input for from_translation_group_id if present in URL params and not editing */}
+      {!isEditing && fromTranslationGroupId && (
+        <input type="hidden" name="from_translation_group_id" value={fromTranslationGroupId} />
+      )}
+      {/* Hidden input for target_language_id_for_translation if present and not editing */}
+       {!isEditing && targetLanguageIdForTranslation && (
+        <input type="hidden" name="target_language_id_for_translation" value={targetLanguageIdForTranslation} />
+      )}
+
+
+      <div>
+        <Label htmlFor="label">Label</Label>
+        <Input id="label" name="label" value={label} onChange={(e) => setLabel(e.target.value)} required className="mt-1" />
+      </div>
+      <div>
+        <Label htmlFor="page_id">Link to Internal Page (Optional)</Label>
+        <Select name="page_id" value={pageId} onValueChange={handlePageSelect} disabled={!languageId}>
+          <SelectTrigger className="mt-1"><SelectValue placeholder="None (Manual URL)" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="___NONE___">None (Manual URL)</SelectItem>
+            {availablePages.map((p) => (
+              <SelectItem key={p.id} value={p.id.toString()}>{p.title} ({p.slug})</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground mt-1">Selecting a page will auto-fill the URL (can be overridden). Requires language to be selected first.</p>
+      </div>
+      <div>
+        <Label htmlFor="url">URL</Label>
+        <Input id="url" name="url" value={url} onChange={(e) => setUrl(e.target.value)} required className="mt-1" placeholder="/about-us or https://example.com" />
+      </div>
+      <div>
+        <Label htmlFor="language_id">Language</Label>
+        <Select
+            name="language_id"
+            value={languageId}
+            onValueChange={(val) => {
+                setLanguageId(val);
+                // Reset page and parent item selection if language changes, as they are language-specific
+                setPageId("");
+                setParentId("");
+                if (url.startsWith("/")) setUrl("#"); // Reset relative URL if it was page-linked
+            }}
+            required
+            disabled={isEditing && !!targetLanguageIdForTranslation} // Disable if creating a specific translation or editing
+        >
+          <SelectTrigger className="mt-1"><SelectValue placeholder="Select language" /></SelectTrigger>
+          <SelectContent>
+            {availableLanguages.map((lang) => (
+              <SelectItem key={lang.id} value={lang.id.toString()}>{lang.name} ({lang.code})</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="menu_key">Menu Location</Label>
+        <Select
+            name="menu_key"
+            value={menuKey}
+            defaultValue="HEADER"
+            onValueChange={(val) => {
+                setMenuKey(val as MenuLocation);
+                setParentId(""); // Reset parent if menu key changes
+            }}
+            required
+            disabled={isEditing && !!initialMenuKeyFromParam} // Disable if creating translation for specific menu
+        >
+          <SelectTrigger className="mt-1"><SelectValue placeholder="Select menu location" /></SelectTrigger>
+          <SelectContent>
+            {menuLocations.map((loc) => (
+              <SelectItem key={loc} value={loc}>{loc.charAt(0) + loc.slice(1).toLowerCase()}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="order">Order</Label>
+        <Input id="order" name="order" type="number" value={order} onChange={(e) => setOrder(e.target.value)} required className="mt-1" />
+      </div>
+      <div>
+        <Label htmlFor="parent_id">Parent Item (Optional)</Label>
+        <Select name="parent_id" value={parentId} onValueChange={setParentId} disabled={!languageId || !menuKey}>
+          <SelectTrigger className="mt-1"><SelectValue placeholder="None (Top Level)" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="___NONE___">None (Top Level)</SelectItem>
+            {availableParentItems
+              .filter(p => p.menu_key === menuKey)
+              .map((parent) => (
+              <SelectItem key={parent.id} value={parent.id.toString()}>{parent.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+         <p className="text-xs text-muted-foreground mt-1">Parents must be in the same language and menu location.</p>
+      </div>
+      <div className="flex justify-end space-x-3">
+        <Button type="button" variant="outline" onClick={() => router.push("/cms/navigation")} disabled={isPending}>Cancel</Button>
+        <Button type="submit" disabled={isPending || dataLoading || !languageId || !menuKey}>
+          {isPending ? "Saving..." : actionButtonText}
+        </Button>
+      </div>
+    </form>
+  );
+}