robobyte-front-builder 1.0.0

package/src/pages/navigatorBuilder/index.jsx

@@ -0,0 +1,2070 @@
+'use client'
+
+import React, { createContext, useContext, useReducer, useCallback, useMemo, useState, useEffect } from 'react'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragOverlay
+} from '@dnd-kit/core'
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import {
+  Box,
+  Paper,
+  Typography,
+  Button,
+  TextField,
+  IconButton,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemButton,
+  ListItemIcon,
+  Divider as MuiDivider,
+  Chip,
+  Alert,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Tooltip,
+  Stack,
+  Tabs,
+  Tab,
+  Collapse
+} from '@mui/material'
+import {
+  Add as AddIcon,
+  Delete as DeleteIcon,
+  Edit as EditIcon,
+  ContentCopy as CloneIcon,
+  ArrowUpward as MoveUpIcon,
+  ArrowDownward as MoveDownIcon,
+  ArrowBack as MoveOutIcon,
+  ArrowForward as MoveInIcon,
+  DragIndicator as DragIcon,
+  Save as SaveIcon,
+  FolderOpen as LoadIcon,
+  CheckCircle as ValidIcon,
+  Error as ErrorIcon,
+  Label as ItemIcon,
+  Folder as GroupIcon,
+  Remove as DividerIcon,
+  Link as ExternalIcon,
+  Visibility as PreviewIcon,
+  ChevronRight as ChevronRightIcon,
+} from '@mui/icons-material'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import * as Icons from 'mdi-material-ui'
+import { v4 as uuidv4 } from 'uuid'
+import PostService from 'src/services/PostService'
+import GetService from 'src/services/GetService'
+import { Endpoints } from 'src/services/Endpoints'
+
+const NODE_TYPES = {
+  ITEM: 'item',
+  DIVIDER: 'divider',
+  EXTERNAL: 'external'
+}
+
+const NAVIGATION_TYPES = {
+  STATIC: 'static',    // Static path (hardcoded)
+  DYNAMIC: 'dynamic',  // Dynamic viewId (from registry)
+  EXTERNAL: 'external' // External URL
+}
+
+// Create a navigation item (becomes group if it has children)
+const createNavItem = () => ({
+  id: uuidv4(),
+  title: 'New Item',
+  icon: null,
+  type: NAVIGATION_TYPES.DYNAMIC, // Default to dynamic (viewId)
+  viewId: null,     // For dynamic type
+  path: null,        // For static type
+  externalUrl: null, // For external type
+  children: []      // ✅ ALWAYS array
+})
+
+// Create the default mainHome root group
+const createMainHomeRoot = () => ({
+  id: 'mainHome-root',
+  title: 'mainHome',
+  icon: null,
+  type: null, // Root group has no type
+  viewId: null,
+  path: null,
+  externalUrl: null,
+  children: [] // ✅ ALWAYS array
+})
+
+/**
+ * Navigation Config - the single output
+ * Always has a mainHome root group
+ */
+const createEmptyNavConfig = () => ({
+  id: uuidv4(),
+  name: 'New Navigation',
+  items: [createMainHomeRoot()], // Always start with mainHome root
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString()
+})
+
+// ============================================================================
+// STEP 3: TREE OPERATIONS
+// ============================================================================
+
+/**
+ * Find node in tree by ID
+ */
+const findNodeInTree = (tree, nodeId) => {
+  if (!tree || !Array.isArray(tree)) return null
+
+  for (const node of tree) {
+    if (node.id === nodeId) return node
+    if (node.children && Array.isArray(node.children)) {
+      const found = findNodeInTree(node.children, nodeId)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+const findParent = (tree, nodeId, parent = null) => {
+  if (!tree || !Array.isArray(tree)) return null
+
+  for (const node of tree) {
+    if (node.id === nodeId) return parent
+    if (node.children && Array.isArray(node.children)) {
+      const found = findParent(node.children, nodeId, node)
+      if (found !== null) return found
+    }
+  }
+  return null
+}
+
+const removeNodeFromTree = (tree, nodeId) => {
+  if (!tree || !Array.isArray(tree)) return tree
+
+  return tree
+    .filter(node => node.id !== nodeId)
+    .map(node => ({
+      ...node,
+      children: Array.isArray(node.children)
+        ? removeNodeFromTree(node.children, nodeId)
+        : []
+    }))
+}
+
+const updateNodeInTree = (tree, nodeId, updates) => {
+  if (!tree || !Array.isArray(tree)) return tree
+
+  return tree.map(node => {
+    if (node.id === nodeId) {
+      // Ensure children is always an array - NEVER undefined or null
+      const updatedNode = { ...node, ...updates, updatedAt: new Date().toISOString() }
+      if (!Array.isArray(updatedNode.children)) {
+        updatedNode.children = []
+      }
+      return updatedNode
+    }
+    if (Array.isArray(node.children)) {
+      return {
+        ...node,
+        children: updateNodeInTree(node.children, nodeId, updates)
+      }
+    }
+    // Always return children as array
+    return { ...node, children: [] }
+  })
+}
+
+const addNodeToTree = (tree, parentId, newNode, position = 'end') => {
+  if (!tree || !Array.isArray(tree)) return tree
+
+  if (parentId === null) {
+    const newTree = [...tree]
+    if (position === 'start') {
+      newTree.unshift(newNode)
+    } else {
+      newTree.push(newNode)
+    }
+    return newTree.map((node, index) => ({ ...node, order: index }))
+  }
+
+  return tree.map(node => {
+    if (node.id === parentId) {
+      // Create a new node object, don't mutate the original
+      // Ensure children is always an array
+      const existingChildren = Array.isArray(node.children) ? node.children : []
+      const newChildren = [...existingChildren]
+      if (position === 'start') {
+        newChildren.unshift(newNode)
+      } else {
+        newChildren.push(newNode)
+      }
+      return {
+        ...node,
+        children: newChildren.map((child, index) => ({ ...child, order: index }))
+      }
+    }
+    if (Array.isArray(node.children)) {
+      return {
+        ...node,
+        children: addNodeToTree(node.children, parentId, newNode, position)
+      }
+    }
+    // Always return children as array
+    return { ...node, children: [] }
+  })
+}
+
+
+const cloneNode = (node) => {
+  const cloned = {
+    ...node,
+    id: uuidv4(),
+    title: `${node.title || 'Untitled'} (Copy)`,
+    order: 0
+  }
+  if (Array.isArray(cloned.children) && cloned.children.length > 0) {
+    cloned.children = cloned.children.map(child => cloneNode(child))
+  } else {
+    cloned.children = []
+  }
+  return cloned
+}
+
+/**
+ * Reorder nodes using drag and drop
+ */
+const reorderNodesInTree = (tree, source, destination) => {
+  if (!tree || !Array.isArray(tree)) return tree
+  if (!destination) return tree
+
+  // Helper to find node by ID
+  const findNodeById = (nodes, nodeId) => {
+    for (const node of nodes) {
+      if (node.id === nodeId) return node
+      if (node.children) {
+        const found = findNodeById(node.children, nodeId)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  // Helper to update children of a node
+  const updateNodeChildren = (nodes, nodeId, newChildren) => {
+    return nodes.map(node => {
+      if (node.id === nodeId) {
+        return { ...node, children: newChildren }
+      }
+      if (node.children) {
+        return { ...node, children: updateNodeChildren(node.children, nodeId, newChildren) }
+      }
+      return node
+    })
+  }
+
+  // Get the node being moved
+  const nodeToMove = source.droppableId === 'root'
+    ? tree[source.index]
+    : (findNodeById(tree, source.droppableId)?.children?.[source.index])
+
+  if (!nodeToMove) return tree
+
+  // Remove from source
+  let result = tree
+  if (source.droppableId === 'root') {
+    result = tree.filter((_, idx) => idx !== source.index)
+  } else {
+    const parent = findNodeById(tree, source.droppableId)
+    if (parent && parent.children) {
+      const newChildren = parent.children.filter((_, idx) => idx !== source.index)
+      result = updateNodeChildren(tree, source.droppableId, newChildren)
+    }
+  }
+
+  // Add to destination
+  if (destination.droppableId === 'root') {
+    const newRoot = [...result]
+    newRoot.splice(destination.index, 0, nodeToMove)
+    result = newRoot
+  } else {
+    const parent = findNodeById(result, destination.droppableId)
+    if (parent) {
+      const newChildren = [...(parent.children || [])]
+      newChildren.splice(destination.index, 0, nodeToMove)
+      result = updateNodeChildren(result, destination.droppableId, newChildren)
+    }
+  }
+
+  return result
+}
+
+const moveNodeInTree = (tree, nodeId, direction) => {
+  if (!tree || !Array.isArray(tree)) return tree
+
+  const findSiblings = (nodes, targetId, parent = null) => {
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].id === targetId) {
+        return { siblings: nodes, index: i, parent }
+      }
+      if (nodes[i].children) {
+        const found = findSiblings(nodes[i].children, targetId, nodes[i])
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  const result = findSiblings(tree, nodeId)
+  if (!result) return tree
+
+  const { siblings, index, parent } = result
+  const newSiblings = [...siblings]
+
+  if (direction === 'up' && index > 0) {
+    [newSiblings[index - 1], newSiblings[index]] = [newSiblings[index], newSiblings[index - 1]]
+  } else if (direction === 'down' && index < newSiblings.length - 1) {
+    [newSiblings[index], newSiblings[index + 1]] = [newSiblings[index + 1], newSiblings[index]]
+  } else if (direction === 'in' && index > 0) {
+    // Move as child of previous sibling
+    const prevSibling = newSiblings[index - 1]
+    if (prevSibling.type === NODE_TYPES.GROUP) {
+      const nodeToMove = newSiblings[index]
+      newSiblings.splice(index, 1)
+      prevSibling.children = [...(prevSibling.children || []), nodeToMove]
+    }
+  } else if (direction === 'out' && parent) {
+    const nodeToMove = newSiblings[index]
+    newSiblings.splice(index, 1)
+  }
+
+  newSiblings.forEach((node, idx) => {
+    node.order = idx
+  })
+
+  const reconstructTree = (nodes) => {
+    return nodes.map(node => {
+      if (parent && node.id === parent.id) {
+        return { ...node, children: newSiblings }
+      }
+      if (node.children) {
+        return { ...node, children: reconstructTree(node.children) }
+      }
+      return node
+    })
+  }
+
+  return parent ? reconstructTree(tree) : newSiblings
+}
+
+
+const validateNavigation = (navConfig) => {
+  const errors = []
+  const warnings = []
+  const nodeIds = new Set()
+
+  const validateNode = (node, path = []) => {
+    const currentPath = [...path, node.id]
+
+    // Check for duplicate IDs
+    if (nodeIds.has(node.id)) {
+      errors.push({
+        nodeId: node.id,
+        message: `Duplicate ID: ${node.id}`,
+        path: currentPath
+      })
+    }
+    nodeIds.add(node.id)
+
+    // Validate navigation item
+    // Single source of truth: Items with children are groups, items without children are simple nav items
+    const hasChildren = Array.isArray(node.children) && node.children.length > 0
+
+    if (!node.title || (typeof node.title === 'string' && node.title.trim() === '')) {
+      errors.push({
+        nodeId: node.id,
+        message: 'Navigation item must have a title',
+        path: currentPath
+      })
+    }
+
+    // Leaf must have appropriate field based on type
+    if (!hasChildren) {
+      const navType = node.type || NAVIGATION_TYPES.DYNAMIC
+
+      if (navType === NAVIGATION_TYPES.DYNAMIC) {
+        if (node.viewId === null || node.viewId === undefined || node.viewId === '') {
+          errors.push({
+            nodeId: node.id,
+            message: 'Dynamic navigation item must have a viewId',
+            path: currentPath
+          })
+        }
+      } else if (navType === NAVIGATION_TYPES.STATIC) {
+        if (!node.path || (typeof node.path === 'string' && node.path.trim() === '')) {
+          errors.push({
+            nodeId: node.id,
+            message: 'Static navigation item must have a path',
+            path: currentPath
+          })
+        }
+      } else if (navType === NAVIGATION_TYPES.EXTERNAL) {
+        if (!node.externalUrl || (typeof node.externalUrl === 'string' && node.externalUrl.trim() === '')) {
+          errors.push({
+            nodeId: node.id,
+            message: 'External navigation item must have an externalUrl',
+            path: currentPath
+          })
+        }
+      }
+    }
+
+    // Validate children recursively
+    if (hasChildren) {
+      node.children.forEach(child => validateNode(child, currentPath))
+    }
+  }
+
+  // Validate root structure
+  if (!navConfig.items || !Array.isArray(navConfig.items)) {
+    errors.push({
+      nodeId: 'root',
+      message: 'Navigation must have items array',
+      path: []
+    })
+  } else {
+    navConfig.items.forEach(item => validateNode(item, []))
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors,
+    warnings
+  }
+}
+
+// ============================================================================
+// STEP 4: REDUCER & STATE MANAGEMENT
+// ============================================================================
+
+const initialState = {
+  navConfig: createEmptyNavConfig(),
+  selectedNodeId: null,
+  expandedNodes: [], // Track which nodes are expanded (array of IDs)
+  validation: { isValid: true, errors: [], warnings: [] },
+  isDirty: false,
+  registry: {} // Dynamic registry loaded from server
+}
+
+const navigatorReducer = (state, action) => {
+  switch (action.type) {
+    case 'CREATE_NAVIGATION':
+      return {
+        ...initialState,
+        navConfig: createEmptyNavConfig()
+      }
+
+    case 'LOAD_NAVIGATION':
+      // Migration: convert old format (path/action/subject) to new format (viewId/type)
+      const migrate = (items) =>
+        items.map(i => {
+          const migrated = {
+            ...i,
+            // Ensure ID exists (generate if missing)
+            id: i.id || (i.title === 'mainHome' ? 'mainHome-root' : uuidv4()),
+            // Set default type if missing
+            type: i.type || (i.viewId ? NAVIGATION_TYPES.DYNAMIC : i.path ? NAVIGATION_TYPES.STATIC : null),
+            viewId: i.viewId ?? null,
+            path: i.path ?? null,
+            externalUrl: i.externalUrl ?? null,
+            children: Array.isArray(i.children) ? migrate(i.children) : []
+          }
+          // Remove old keys
+          delete migrated.action
+          delete migrated.subject
+          return migrated
+        })
+
+      const loadedConfig = action.payload.config || action.payload
+      const loadedRegistry = action.payload.registry || {}
+      console.log('LOAD_NAVIGATION reducer - received config:', loadedConfig)
+      console.log('LOAD_NAVIGATION reducer - received registry:', loadedRegistry)
+
+      if (loadedConfig.items) {
+        console.log('Migrating items, count:', loadedConfig.items.length)
+        loadedConfig.items = migrate(loadedConfig.items)
+        console.log('After migration:', loadedConfig.items)
+
+        // Ensure mainHome root exists
+        // Check if first item is mainHome root
+        const hasMainHomeRoot = loadedConfig.items.length > 0 &&
+          (loadedConfig.items[0].id === 'mainHome-root' ||
+           loadedConfig.items[0].title === 'mainHome')
+
+        console.log('Has mainHome root?', hasMainHomeRoot)
+
+        if (!hasMainHomeRoot) {
+          // Wrap existing items in mainHome root
+          console.log('Wrapping items in mainHome root')
+          const mainHomeRoot = createMainHomeRoot()
+          mainHomeRoot.children = loadedConfig.items
+          loadedConfig.items = [mainHomeRoot]
+        } else {
+          // Ensure the mainHome root has the correct ID
+          if (loadedConfig.items[0].title === 'mainHome' && loadedConfig.items[0].id !== 'mainHome-root') {
+            loadedConfig.items[0].id = 'mainHome-root'
+          }
+          // If mainHome root exists but has no children, ensure it has children array
+          if (!Array.isArray(loadedConfig.items[0].children)) {
+            loadedConfig.items[0].children = []
+          }
+        }
+      } else {
+        // No items, create empty mainHome root
+        console.log('No items found, creating empty mainHome root')
+        loadedConfig.items = [createMainHomeRoot()]
+      }
+
+      console.log('Final loaded config items:', loadedConfig.items)
+
+      const validation = validateNavigation(loadedConfig)
+      return {
+        ...state,
+        navConfig: loadedConfig,
+        registry: loadedRegistry,
+        selectedNodeId: null,
+        validation,
+        isDirty: false
+      }
+
+    case 'SELECT_NODE':
+      return {
+        ...state,
+        selectedNodeId: action.payload
+      }
+
+    case 'TOGGLE_EXPAND':
+      const nodeId = action.payload
+      const isCurrentlyExpanded = state.expandedNodes.includes(nodeId)
+      return {
+        ...state,
+        expandedNodes: isCurrentlyExpanded
+          ? state.expandedNodes.filter(id => id !== nodeId)
+          : [...state.expandedNodes, nodeId]
+      }
+
+    case 'ADD_NODE': {
+      const { parentId, position } = action.payload
+      const newNode = createNavItem()
+      // newNode.viewId stays null by default (acts like a group until you assign it)
+
+      const updatedItems = addNodeToTree(
+        state.navConfig.items,
+        parentId,
+        newNode,
+        position
+      )
+      const updatedConfig = {
+        ...state.navConfig,
+        items: updatedItems,
+        updatedAt: new Date().toISOString()
+      }
+      const newValidation = validateNavigation(updatedConfig)
+
+      // Auto-expand parent if adding a child - use Set to avoid duplicates
+      const expandedNodes = parentId
+        ? Array.from(new Set([...state.expandedNodes, parentId]))
+        : state.expandedNodes
+
+      return {
+        ...state,
+        navConfig: updatedConfig,
+        selectedNodeId: newNode.id,
+        expandedNodes,
+        validation: newValidation,
+        isDirty: true
+      }
+    }
+
+    case 'UPDATE_NODE': {
+      const { nodeId, updates } = action.payload
+      const updatedItems = updateNodeInTree(
+        state.navConfig.items,
+        nodeId,
+        updates
+      )
+      const updatedConfig = {
+        ...state.navConfig,
+        items: updatedItems,
+        updatedAt: new Date().toISOString()
+      }
+      const newValidation = validateNavigation(updatedConfig)
+
+      return {
+        ...state,
+        navConfig: updatedConfig,
+        validation: newValidation,
+        isDirty: true
+      }
+    }
+
+    case 'DELETE_NODE': {
+      // Prevent deleting the mainHome root
+      if (action.payload === 'mainHome-root') {
+        return state
+      }
+
+      const updatedItems = removeNodeFromTree(
+        state.navConfig.items,
+        action.payload
+      )
+      const updatedConfig = {
+        ...state.navConfig,
+        items: updatedItems,
+        updatedAt: new Date().toISOString()
+      }
+      const newValidation = validateNavigation(updatedConfig)
+
+      return {
+        ...state,
+        navConfig: updatedConfig,
+        selectedNodeId: state.selectedNodeId === action.payload ? null : state.selectedNodeId,
+        validation: newValidation,
+        isDirty: true
+      }
+    }
+
+    case 'CLONE_NODE': {
+      const node = findNodeInTree(state.navConfig.items, action.payload)
+      if (!node) return state
+
+      const cloned = {
+        ...node,
+        id: uuidv4(),
+        title: `${node.title} (Copy)`
+      }
+      if (cloned.children && Array.isArray(cloned.children)) {
+        const cloneChild = (child) => ({
+          ...child,
+          id: uuidv4()
+        })
+        cloned.children = cloned.children.map(cloneChild)
+      }
+
+      const parent = findParent(state.navConfig.items, action.payload)
+      const parentId = parent ? parent.id : null
+
+      const updatedItems = addNodeToTree(
+        state.navConfig.items,
+        parentId,
+        cloned,
+        'end'
+      )
+      const updatedConfig = {
+        ...state.navConfig,
+        items: updatedItems,
+        updatedAt: new Date().toISOString()
+      }
+      const newValidation = validateNavigation(updatedConfig)
+
+      return {
+        ...state,
+        navConfig: updatedConfig,
+        selectedNodeId: cloned.id,
+        validation: newValidation,
+        isDirty: true
+      }
+    }
+
+    case 'MOVE_NODE': {
+      const { nodeId, direction } = action.payload
+      const updatedItems = moveNodeInTree(
+        state.navConfig.items,
+        nodeId,
+        direction
+      )
+      const updatedConfig = {
+        ...state.navConfig,
+        items: updatedItems,
+        updatedAt: new Date().toISOString()
+      }
+      const newValidation = validateNavigation(updatedConfig)
+
+      return {
+        ...state,
+        navConfig: updatedConfig,
+        validation: newValidation,
+        isDirty: true
+      }
+    }
+
+    case 'REORDER_NODES': {
+      const { source, destination } = action.payload
+      const updatedItems = reorderNodesInTree(
+        state.navConfig.items,
+        source,
+        destination
+      )
+      const updatedConfig = {
+        ...state.navConfig,
+        items: updatedItems,
+        updatedAt: new Date().toISOString()
+      }
+      const newValidation = validateNavigation(updatedConfig)
+
+      return {
+        ...state,
+        navConfig: updatedConfig,
+        validation: newValidation,
+        isDirty: true
+      }
+    }
+
+    case 'VALIDATE':
+      return {
+        ...state,
+        validation: validateNavigation(state.navConfig)
+      }
+
+    case 'SET_DIRTY':
+      return {
+        ...state,
+        isDirty: action.payload
+      }
+
+    default:
+      return state
+  }
+}
+
+// ============================================================================
+// CONTEXT
+// ============================================================================
+
+const NavigatorContext = createContext(null)
+
+export const NavigatorProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(navigatorReducer, initialState)
+
+  const actions = useMemo(() => ({
+    createNavigation: () => dispatch({ type: 'CREATE_NAVIGATION' }),
+    loadNavigation: (data) => dispatch({ type: 'LOAD_NAVIGATION', payload: data }),
+    selectNode: (nodeId) => dispatch({ type: 'SELECT_NODE', payload: nodeId }),
+    toggleExpand: (nodeId) => dispatch({ type: 'TOGGLE_EXPAND', payload: nodeId }),
+    addNode: (parentId, position = 'end') =>
+      dispatch({ type: 'ADD_NODE', payload: { parentId, position } }),
+    updateNode: (nodeId, updates) =>
+      dispatch({ type: 'UPDATE_NODE', payload: { nodeId, updates } }),
+    deleteNode: (nodeId) => dispatch({ type: 'DELETE_NODE', payload: nodeId }),
+    cloneNode: (nodeId) => dispatch({ type: 'CLONE_NODE', payload: nodeId }),
+    moveNode: (nodeId, direction) =>
+      dispatch({ type: 'MOVE_NODE', payload: { nodeId, direction } }),
+    reorderNodes: (source, destination) =>
+      dispatch({ type: 'REORDER_NODES', payload: { source, destination } }),
+    validate: () => dispatch({ type: 'VALIDATE' }),
+    getNavConfig: () => {
+      // Convert to navigation format: remove internal fields, keep only navigation structure
+      // Handle different navigation types (static, dynamic, external)
+      const convertToNavFormat = (items) => {
+        return items.map(item => {
+          const navItem = {
+            title: item.title,
+            icon: item.icon
+          }
+
+          const hasChildren = Array.isArray(item.children) && item.children.length > 0
+          const navType = item.type || NAVIGATION_TYPES.DYNAMIC
+
+          // Handle based on type (for both items and groups)
+          if (navType === NAVIGATION_TYPES.DYNAMIC && item.viewId) {
+            // Dynamic items/groups: always include viewId
+            navItem.type = 'dynamic'
+            navItem.viewId = item.viewId
+
+            // Only include explicit path if provided
+            // DO NOT generate /viewer/${viewId} path - let runtime resolve from registry
+            if (item.path) {
+              navItem.path = item.path
+            }
+            // Note: Path will be resolved at runtime from registry using viewId
+          } else if (navType === NAVIGATION_TYPES.STATIC && item.path && !hasChildren) {
+            // Static: use the path directly (only for items, not groups)
+            navItem.path = item.path
+            navItem.type = 'static'
+          } else if (navType === NAVIGATION_TYPES.EXTERNAL && item.externalUrl && !hasChildren) {
+            // External: use externalUrl (only for items, not groups)
+            navItem.externalUrl = item.externalUrl
+            navItem.type = 'external'
+            navItem.openInNewTab = true // External links typically open in new tab
+          }
+
+          // Add children if they exist (makes it a group)
+          if (hasChildren) {
+            navItem.children = convertToNavFormat(item.children)
+          }
+
+          return navItem
+        })
+      }
+
+      // Ensure mainHome root exists and extract its children for output
+      let itemsToConvert = state.navConfig.items
+
+      // If mainHome root exists, use its children; otherwise use items as-is
+      const mainHomeRoot = itemsToConvert.find(item =>
+        item.id === 'mainHome-root' || item.title === 'mainHome'
+      )
+
+      if (mainHomeRoot && Array.isArray(mainHomeRoot.children)) {
+        // Return mainHome with its children
+        itemsToConvert = [{
+          title: 'mainHome',
+          children: convertToNavFormat(mainHomeRoot.children)
+        }]
+      } else {
+        // No mainHome root, wrap items in mainHome
+        itemsToConvert = [{
+          title: 'mainHome',
+          children: convertToNavFormat(state.navConfig.items)
+        }]
+      }
+
+      return {
+        ...state.navConfig,
+        items: itemsToConvert
+      }
+    }
+  }), [state.navConfig])
+
+  return (
+    <NavigatorContext.Provider value={{ state, actions }}>
+      {children}
+    </NavigatorContext.Provider>
+  )
+}
+
+export const useNavigator = () => {
+  const context = useContext(NavigatorContext)
+  if (!context) {
+    throw new Error('useNavigator must be used within NavigatorProvider')
+  }
+  return context
+}
+
+// ============================================================================
+// UI COMPONENTS
+// ============================================================================
+
+
+/**
+ * Tree Node Component - Using @dnd-kit useSortable
+ */
+const TreeNode = ({ node, depth = 0 }) => {
+  const { state, actions } = useNavigator()
+
+  // Safety check
+  if (!node || !node.id) {
+    return null
+  }
+
+  // Debug logging (temporary)
+  // Debug logging (temporary) - remove after testing
+  console.log('NODE', node.title, 'children:', node.children?.length || 0)
+
+  const isSelected = state.selectedNodeId === node.id
+  // Single source of truth: group = has children array with items
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0
+  const isExpanded = state.expandedNodes.includes(node.id)
+  // Always show chevron if children array exists (even if empty)
+  const canHaveChildren = Array.isArray(node.children)
+
+  // @dnd-kit useSortable hook
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: String(node.id),
+    disabled: false
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  }
+
+  const handleToggleExpand = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    actions.toggleExpand(node.id)
+  }
+
+  const getNodeIcon = () => {
+    // Use hasChildren (not isGroup) - single source of truth
+    if (hasChildren) {
+      return GroupIcon ? <GroupIcon fontSize="small" /> : null
+    }
+    return ItemIcon ? <ItemIcon fontSize="small" /> : null
+  }
+
+  const getPathDisplay = () => {
+    if (hasChildren) return `${node.children.length} items`
+
+    const navType = node.type || NAVIGATION_TYPES.DYNAMIC
+    if (navType === NAVIGATION_TYPES.DYNAMIC) {
+      return node.viewId ? `View #${node.viewId}` : ''
+    } else if (navType === NAVIGATION_TYPES.STATIC) {
+      return node.path || ''
+    } else if (navType === NAVIGATION_TYPES.EXTERNAL) {
+      return node.externalUrl || ''
+    }
+    return ''
+  }
+
+  const handleAddChild = (e) => {
+    e.stopPropagation()
+    actions.addNode(node.id)
+  }
+
+  return (
+    <Box
+      ref={setNodeRef}
+      style={style}
+      sx={{
+        mb: 0.5,
+        ...(isDragging && {
+          boxShadow: 3,
+          transform: 'rotate(2deg)'
+        })
+      }}
+    >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                position: 'relative',
+                '&::before': depth > 0 ? {
+                  content: '""',
+                  position: 'absolute',
+                  left: depth * 24 - 12,
+                  top: 0,
+                  bottom: 0,
+                  width: '1px',
+                  bgcolor: 'divider',
+                  opacity: 0.3
+                } : {}
+              }}
+            >
+              {/* Tree connector lines */}
+              {depth > 0 && (
+                <Box
+                  sx={{
+                    position: 'absolute',
+                    left: depth * 24 - 12,
+                    top: -8,
+                    width: 12,
+                    height: '50%',
+                    borderLeft: '1px solid',
+                    borderBottom: '1px solid',
+                    borderColor: 'divider',
+                    opacity: 0.3
+                  }}
+                />
+              )}
+              <ListItemButton
+                selected={isSelected}
+                onClick={() => actions.selectNode(node.id)}
+                {...attributes}
+                sx={{
+                  pl: depth * 3 + 2,
+                  flex: 1,
+                  borderRadius: 1,
+                  '&.Mui-selected': {
+                    backgroundColor: 'primary.main',
+                    color: 'primary.contrastText',
+                    '&:hover': {
+                      backgroundColor: 'primary.dark'
+                    },
+                    '& .MuiListItemIcon-root': {
+                      color: 'primary.contrastText'
+                    },
+                    '& .MuiListItemText-primary': {
+                      color: 'primary.contrastText'
+                    },
+                    '& .MuiListItemText-secondary': {
+                      color: 'primary.contrastText',
+                      opacity: 0.8
+                    }
+                  },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 32, display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  {/* Drag handle - only this element has drag listeners */}
+                  <Box
+                    {...(listeners || {})}
+                    sx={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      cursor: isDragging ? 'grabbing' : 'grab',
+                      p: 0.5,
+                      borderRadius: 1,
+                      '&:hover': {
+                        bgcolor: isSelected ? 'rgba(255,255,255,0.1)' : 'action.hover'
+                      }
+                    }}
+                  >
+                    {DragIcon && <DragIcon fontSize="small" sx={{ color: isSelected ? 'primary.contrastText' : 'text.secondary' }} />}
+                  </Box>
+                  {/* Always show chevron if children array exists (even if empty) */}
+                  {canHaveChildren && KeyboardArrowDownIcon && ChevronRightIcon && (
+                    <IconButton
+                      size="small"
+                      onClick={handleToggleExpand}
+                      onMouseDown={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                      }}
+                      onPointerDown={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                      }}
+                      onTouchStart={(e) => {
+                        e.stopPropagation()
+                      }}
+                      sx={{
+                        p: 0.5,
+                        color: isSelected ? 'primary.contrastText' : 'text.secondary',
+                        '&:hover': {
+                          bgcolor: isSelected ? 'rgba(255,255,255,0.1)' : 'action.hover'
+                        },
+                        pointerEvents: 'auto'
+                      }}
+                    >
+                      {isExpanded ? (
+                        <KeyboardArrowDownIcon fontSize="small" />
+                      ) : (
+                        <ChevronRightIcon fontSize="small" />
+                      )}
+                    </IconButton>
+                  )}
+                  {getNodeIcon() || <Box sx={{ width: 24, height: 24 }} />}
+                </ListItemIcon>
+                <ListItemText
+                  primary={node.title || 'Untitled'}
+                  secondary={getPathDisplay()}
+                />
+                <Box sx={{ display: 'flex', gap: 0.5 }} onClick={(e) => e.stopPropagation()}>
+                  <Tooltip title="Add Item Inside">
+                    <IconButton
+                      size="small"
+                      color="primary"
+                      onClick={handleAddChild}
+                    >
+                      <AddIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Clone">
+                    <IconButton
+                      size="small"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        actions.cloneNode(node.id)
+                      }}
+                    >
+                      <CloneIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                  {/* Don't show delete button for mainHome root */}
+                  {node.id !== 'mainHome-root' && (
+                    <Tooltip title="Delete">
+                      <IconButton
+                        size="small"
+                        color="error"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          if (confirm('Delete this item?')) {
+                            actions.deleteNode(node.id)
+                          }
+                        }}
+                      >
+                        <DeleteIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+                </Box>
+              </ListItemButton>
+            </Box>
+          </Box>
+  )
+}
+
+/**
+ * Tree Children Component - SortableContext wrapper for children
+ * @dnd-kit handles nested structures natively
+ */
+const TreeChildren = ({ parent, depth = 0 }) => {
+  const { state } = useNavigator()
+  const isExpanded = state.expandedNodes.includes(parent.id)
+
+  // Ensure children is always an array
+  const children = Array.isArray(parent.children) ? parent.children : []
+  const hasChildren = children.length > 0
+
+  // Always render if expanded (even if no children yet) to allow adding items
+  if (!isExpanded) {
+    return null
+  }
+
+  const childIds = hasChildren
+    ? children
+        .filter(child => child && child.id)
+        .map(child => String(child.id))
+    : []
+
+  return (
+    <SortableContext items={childIds} strategy={verticalListSortingStrategy}>
+      <Box
+        sx={{
+          ml: 3
+        }}
+      >
+        <Collapse in={isExpanded} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            {hasChildren ? (
+              children
+                .filter(child => child && child.id)
+                .map((child) => (
+                  <React.Fragment key={String(child.id)}>
+                    <TreeNode node={child} depth={depth + 1} />
+                    {state.expandedNodes.includes(child.id) && (
+                      <TreeChildren parent={child} depth={depth + 1} />
+                    )}
+
+                  </React.Fragment>
+                ))
+            ) : (
+              <Box sx={{ p: 2, textAlign: 'center', color: 'text.secondary' }}>
+                <Typography variant="body2">No items yet. Click "Add Item Inside" to add.</Typography>
+              </Box>
+            )}
+          </List>
+        </Collapse>
+      </Box>
+    </SortableContext>
+  )
+}
+
+/**
+ * Center Panel - Tree View with Root and Drag & Drop
+ */
+const TreePanel = () => {
+  const { state, actions } = useNavigator()
+  const [activeId, setActiveId] = useState(null)
+
+  // @dnd-kit sensors - configure to prevent accidental drags when clicking buttons
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Require 8px movement before drag starts
+        delay: 0,
+        tolerance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  )
+
+  const handleAddToRoot = () => {
+    // Find mainHome root and add to it
+    const mainHomeRoot = state.navConfig.items.find(item =>
+      item.id === 'mainHome-root' || item.title === 'mainHome'
+    )
+
+    if (mainHomeRoot) {
+      // Add to mainHome root
+      actions.addNode(mainHomeRoot.id)
+      // Auto-expand mainHome if not already expanded
+      if (!state.expandedNodes.includes('mainHome-root')) {
+        actions.toggleExpand('mainHome-root')
+      }
+    } else {
+      // No mainHome root, add to root (will be wrapped in mainHome on save)
+      actions.addNode(null)
+    }
+  }
+
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id)
+  }
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event
+    setActiveId(null)
+
+    if (!over || active.id === over.id) {
+      return
+    }
+
+    // Helper to find node and its parent info
+    const findNodeInfo = (items, targetId, parentId = null) => {
+      for (let i = 0; i < items.length; i++) {
+        const node = items[i]
+        if (String(node.id) === String(targetId)) {
+          return {
+            node,
+            parentId,
+            index: i
+          }
+        }
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          const found = findNodeInfo(node.children, targetId, node.id)
+          if (found) return found
+        }
+      }
+      return null
+    }
+
+    const activeInfo = findNodeInfo(state.navConfig.items, active.id)
+    const overInfo = findNodeInfo(state.navConfig.items, over.id)
+
+    if (!activeInfo || !overInfo) return
+
+    // Convert to the format expected by reorderNodes
+    const source = {
+      droppableId: activeInfo.parentId || 'root',
+      index: activeInfo.index
+    }
+
+    const destination = {
+      droppableId: overInfo.parentId || 'root',
+      index: overInfo.index
+    }
+
+    actions.reorderNodes(source, destination)
+  }
+
+  return (
+    <Paper sx={{ p: 2, height: '100%', overflow: 'auto' }}>
+      <Typography variant="h6" gutterBottom>
+        Navigation Tree
+      </Typography>
+
+      {/* Root Node */}
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 2,
+          mb: 2,
+          bgcolor: 'background.default',
+          border: '2px dashed',
+          borderColor: 'divider'
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+          <Typography variant="subtitle1" fontWeight="bold">
+            Root Navigation
+          </Typography>
+          <Button
+            variant="contained"
+            size="small"
+            startIcon={<AddIcon />}
+            onClick={handleAddToRoot}
+          >
+            Add Navigation Item
+          </Button>
+        </Box>
+        <Typography variant="body2" color="text.secondary">
+          Drag items to reorder. Items with children become groups automatically.
+        </Typography>
+      </Paper>
+
+      {/* Navigation Items with Drag and Drop */}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        {(() => {
+          // Find mainHome root
+          const mainHomeRoot = state.navConfig.items.find(item =>
+            item.id === 'mainHome-root' || item.title === 'mainHome'
+          )
+
+          // If mainHome exists, use its children; otherwise use items directly
+          const itemsToShow = mainHomeRoot && Array.isArray(mainHomeRoot.children)
+            ? mainHomeRoot.children
+            : state.navConfig.items
+
+          // Auto-expand mainHome root if it exists
+          const shouldExpandMainHome = mainHomeRoot && !state.expandedNodes.includes('mainHome-root')
+          if (shouldExpandMainHome) {
+            actions.toggleExpand('mainHome-root')
+          }
+
+          if (itemsToShow.length === 0 && !mainHomeRoot) {
+            return <Alert severity="info">No navigation items yet. Click "Add Navigation Item" above to get started.</Alert>
+          }
+
+          return (
+            <SortableContext
+              items={itemsToShow.map(node => String(node.id))}
+              strategy={verticalListSortingStrategy}
+            >
+              <List>
+                {/* Show mainHome root as header if it exists */}
+                {mainHomeRoot && (
+                  <ListItem
+                    sx={{
+                      px: 2,
+                      py: 1.5,
+                      bgcolor: 'action.hover',
+                      borderBottom: '1px solid',
+                      borderColor: 'divider'
+                    }}
+                  >
+                    <ListItemIcon>
+                      <GroupIcon color="primary" />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={
+                        <Typography variant="subtitle1" fontWeight="bold">
+                          {mainHomeRoot.title || 'mainHome'}
+                        </Typography>
+                      }
+                      secondary="Root Navigation Group"
+                    />
+                    <IconButton
+                      size="small"
+                      onClick={() => actions.toggleExpand('mainHome-root')}
+                    >
+                      {state.expandedNodes.includes('mainHome-root') ? (
+                        <KeyboardArrowDownIcon />
+                      ) : (
+                        <ChevronRightIcon />
+                      )}
+                    </IconButton>
+                  </ListItem>
+                )}
+
+                {/* Show children of mainHome */}
+                {mainHomeRoot && state.expandedNodes.includes('mainHome-root') && (
+                  <TreeChildren parent={mainHomeRoot} depth={0} />
+                )}
+
+                {/* If no mainHome root, show items directly */}
+                {!mainHomeRoot && itemsToShow.map((node) => (
+                  <React.Fragment key={String(node.id)}>
+                    <TreeNode node={node} depth={0} />
+                    {state.expandedNodes.includes(node.id) && (
+                      <TreeChildren parent={node} depth={0} />
+                    )}
+                  </React.Fragment>
+                ))}
+              </List>
+            </SortableContext>
+          )
+        })()}
+        <DragOverlay>
+          {activeId ? (() => {
+            // Find the node being dragged
+            const findNodeById = (items, id) => {
+              for (const node of items) {
+                if (String(node.id) === String(id)) return node
+                if (Array.isArray(node.children)) {
+                  const found = findNodeById(node.children, id)
+                  if (found) return found
+                }
+              }
+              return null
+            }
+            const draggedNode = findNodeById(state.navConfig.items, activeId)
+            if (!draggedNode) return null
+
+            return (
+              <Box
+                sx={{
+                  p: 1.5,
+                  bgcolor: 'background.paper',
+                  boxShadow: 6,
+                  borderRadius: 1,
+                  border: '2px solid',
+                  borderColor: 'primary.main',
+                  minWidth: 200,
+                  opacity: 0.9
+                }}
+              >
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <DragIcon sx={{ color: 'primary.main' }} />
+                  <Typography variant="body2" fontWeight="medium">
+                    {draggedNode.title || 'Untitled'}
+                  </Typography>
+                </Box>
+              </Box>
+            )
+          })() : null}
+        </DragOverlay>
+      </DndContext>
+    </Paper>
+  )
+}
+
+/**
+ * Left Panel - Properties
+ */
+const PropertiesPanel = () => {
+  const { state, actions } = useNavigator()
+  const selectedNode = state.selectedNodeId
+    ? findNodeInTree(state.navConfig.items, state.selectedNodeId)
+    : null
+
+  if (!selectedNode) {
+    return (
+      <Paper sx={{ p: 2, height: '100%' }}>
+        <Typography variant="h6" gutterBottom>
+          Properties
+        </Typography>
+        <Alert severity="info">Select a node to edit its properties</Alert>
+      </Paper>
+    )
+  }
+
+  const handleUpdate = (field, value) => {
+    actions.updateNode(selectedNode.id, { [field]: value })
+  }
+
+
+  return (
+    <Paper sx={{ p: 2, height: '100%', overflow: 'auto' }}>
+      <Typography variant="h6" gutterBottom>
+        Properties
+      </Typography>
+
+      <Stack spacing={2}>
+        <TextField
+          label="Title"
+          value={selectedNode.title || ''}
+          onChange={(e) => handleUpdate('title', e.target.value)}
+          fullWidth
+          required
+        />
+
+        {/* Navigation Type - show for both items and groups */}
+        <FormControl fullWidth>
+          <InputLabel>Navigation Type</InputLabel>
+          <Select
+            value={selectedNode.type || NAVIGATION_TYPES.DYNAMIC}
+            label="Navigation Type"
+            onChange={(e) => {
+              const newType = e.target.value
+              // Clear fields when switching types
+              const updates = { type: newType }
+              if (newType === NAVIGATION_TYPES.DYNAMIC) {
+                updates.externalUrl = null
+              } else if (newType === NAVIGATION_TYPES.STATIC) {
+                updates.viewId = null
+                updates.externalUrl = null
+              } else if (newType === NAVIGATION_TYPES.EXTERNAL) {
+                updates.viewId = null
+                updates.path = null
+              }
+              actions.updateNode(selectedNode.id, updates)
+            }}
+          >
+            <MenuItem value={NAVIGATION_TYPES.DYNAMIC}>Dynamic (View ID)</MenuItem>
+            <MenuItem value={NAVIGATION_TYPES.STATIC}>Static (Path)</MenuItem>
+            <MenuItem value={NAVIGATION_TYPES.EXTERNAL}>External (URL)</MenuItem>
+          </Select>
+        </FormControl>
+
+        {/* Dynamic type fields - available for both items and groups */}
+        {selectedNode.type === NAVIGATION_TYPES.DYNAMIC && (
+          <>
+            <TextField
+              label="View ID"
+              type="number"
+              value={selectedNode.viewId ?? ''}
+              onChange={(e) => {
+                const v = e.target.value.trim()
+                actions.updateNode(selectedNode.id, { viewId: v === '' ? null : Number(v) })
+              }}
+              fullWidth
+              placeholder="e.g., 22"
+              helperText={(() => {
+                if (!selectedNode.viewId) return null
+                const view = state.registry[selectedNode.viewId]
+                return view ? `View: ${view.name} (/${view.slug})` : 'View details not found'
+              })()}
+            />
+            {/* Groups with viewId can also have a path */}
+            {(selectedNode.children && selectedNode.children.length > 0) && selectedNode.viewId && (
+              <TextField
+                label="Path (optional for groups)"
+                value={selectedNode.path || ''}
+                onChange={(e) => {
+                  actions.updateNode(selectedNode.id, { path: e.target.value.trim() || null })
+                }}
+                fullWidth
+                placeholder="e.g., /viewer/22"
+                helperText="Groups with viewId can have a path"
+              />
+            )}
+          </>
+        )}
+
+        {/* Static type fields - only for items without children */}
+        {selectedNode.type === NAVIGATION_TYPES.STATIC && (!selectedNode.children || selectedNode.children.length === 0) && (
+          <TextField
+            label="Path"
+            value={selectedNode.path || ''}
+            onChange={(e) => {
+              actions.updateNode(selectedNode.id, { path: e.target.value.trim() || null })
+            }}
+            fullWidth
+            placeholder="e.g., /mainHome or /users"
+          />
+        )}
+
+        {/* External type fields - only for items without children */}
+        {selectedNode.type === NAVIGATION_TYPES.EXTERNAL && (!selectedNode.children || selectedNode.children.length === 0) && (
+          <TextField
+            label="External URL"
+            value={selectedNode.externalUrl || ''}
+            onChange={(e) => {
+              actions.updateNode(selectedNode.id, { externalUrl: e.target.value.trim() || null })
+            }}
+            fullWidth
+            placeholder="e.g., https://example.com"
+          />
+        )}
+
+
+        <TextField
+          label="Icon (MUI icon name)"
+          value={selectedNode.icon || ''}
+          onChange={(e) => handleUpdate('icon', e.target.value)}
+          fullWidth
+          placeholder="e.g., HomeOutline"
+        />
+
+        <Chip
+          label={Array.isArray(selectedNode.children) && selectedNode.children.length > 0 ? 'Group' : 'Navigation Item'}
+          color={Array.isArray(selectedNode.children) && selectedNode.children.length > 0 ? 'primary' : 'default'}
+          variant="outlined"
+        />
+        {Array.isArray(selectedNode.children) && selectedNode.children.length > 0 && (
+          <Chip
+            label={`${selectedNode.children.length} child items`}
+            color="secondary"
+            variant="outlined"
+          />
+        )}
+      </Stack>
+    </Paper>
+  )
+}
+
+/**
+ * Preview Navigation Item Component
+ */
+const PreviewNavItem = ({ node, depth = 0, onItemClick }) => {
+  const [expanded, setExpanded] = useState(false)
+
+  // Safety check: ensure node exists
+  if (!node || !node.id) {
+    return null
+  }
+
+  // Single source of truth: use only children array
+  const hasChildren = Array.isArray(node.children) && node.children.length > 0
+
+  const getIcon = () => {
+    if (node.icon && Icons[node.icon]) {
+      const IconComponent = Icons[node.icon]
+      return <IconComponent />
+    }
+    if (hasChildren) {
+      return <GroupIcon />
+    }
+    return <ItemIcon />
+  }
+
+
+  return (
+    <Box>
+      <ListItemButton
+        onClick={() => {
+          if (hasChildren) {
+            setExpanded(!expanded)
+          } else if (onItemClick) {
+            onItemClick(node)
+          }
+        }}
+        sx={{
+          pl: depth * 2 + 2,
+          py: 1.5,
+          borderRadius: 1,
+          mb: 0.5,
+          '&:hover': {
+            backgroundColor: 'action.hover'
+          }
+        }}
+      >
+        <ListItemIcon sx={{ minWidth: 40, color: 'text.secondary' }}>
+          {getIcon()}
+        </ListItemIcon>
+        <ListItemText
+          primary={node.title || 'Untitled'}
+          secondary={
+            hasChildren
+              ? `${node.children.length} items`
+              : (node.viewId ? `View #${node.viewId}` : '')
+          }
+        />
+        {hasChildren && (
+          <Box sx={{ ml: 1 }}>
+            {expanded ? <KeyboardArrowDownIcon /> : <ChevronRightIcon />}
+          </Box>
+        )}
+      </ListItemButton>
+      {hasChildren && (
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            {node.children
+              .filter(child => child && child.id) // Filter out invalid children
+              .map(child => (
+                <PreviewNavItem
+                  key={child.id}
+                  node={child}
+                  depth={depth + 1}
+                  onItemClick={onItemClick}
+                />
+              ))}
+          </List>
+        </Collapse>
+      )}
+    </Box>
+  )
+}
+
+/**
+ * Preview Panel - Shows how navigation will look
+ */
+const PreviewPanel = () => {
+  const { state, actions } = useNavigator()
+
+  const handleItemClick = (node) => {
+    actions.selectNode(node.id)
+  }
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: 'background.default' }}>
+      <Paper sx={{ p: 2, borderRadius: 0, borderBottom: 1, borderColor: 'divider' }}>
+        <Typography variant="h6" gutterBottom>
+          Navigation Preview
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          This is how your navigation will appear in the application
+        </Typography>
+      </Paper>
+
+      {state.navConfig.items.length === 0 ? (
+        <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Alert severity="info" sx={{ maxWidth: 500 }}>
+            No navigation items to preview. Add items from the builder.
+          </Alert>
+        </Box>
+      ) : (
+        <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
+          <Paper
+            variant="outlined"
+            sx={{
+              p: 2,
+              bgcolor: 'background.paper',
+              borderRadius: 2,
+              border: 1,
+              borderColor: 'divider',
+              maxWidth: 400,
+              mx: 'auto'
+            }}
+          >
+            <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 2, px: 2 }}>
+              {state.navConfig.name || 'Navigation Menu'}
+            </Typography>
+            <List sx={{ py: 0 }}>
+              {state.navConfig.items.map(node => (
+                <PreviewNavItem
+                  key={node.id}
+                  node={node}
+                  onItemClick={handleItemClick}
+                />
+              ))}
+            </List>
+          </Paper>
+
+          {/* JSON Output Preview */}
+          <Paper
+            variant="outlined"
+            sx={{
+              mt: 3,
+              p: 2,
+              bgcolor: 'background.paper',
+              borderRadius: 2,
+              border: 1,
+              borderColor: 'divider',
+              maxWidth: 800,
+              mx: 'auto'
+            }}
+          >
+            <Typography variant="subtitle2" gutterBottom>
+              JSON Output
+            </Typography>
+            <Box
+              component="pre"
+              sx={{
+                p: 2,
+                direction:'rtl',
+                bgcolor: 'grey.100',
+                borderRadius: 1,
+                overflow: 'auto',
+                fontSize: '0.75rem',
+                maxHeight: 300
+              }}
+            >
+              {JSON.stringify(state.navConfig, null, 2)}
+            </Box>
+          </Paper>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+/**
+ * Main Navigator Builder Component
+ */
+const NavigatorBuilder = () => {
+  const { state, actions } = useNavigator()
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [loadDialogOpen, setLoadDialogOpen] = useState(false)
+  const [navName, setNavName] = useState(state.navConfig.name)
+  const [viewMode, setViewMode] = useState('builder') // 'builder' or 'preview'
+
+  const fetchNavigationSettings = useCallback(async () => {
+    try {
+      const result = await GetService(Endpoints.Navigator.Get.NavigatorSetting, false)
+      console.log('Raw fetched result:', result)
+
+      let data = result
+      if (result && result.data) {
+        try {
+          data = JSON.parse(result.data)
+        } catch (e) {
+          console.error('Error parsing result.value:', e)
+        }
+      }
+
+      if (data && data.config) {
+        console.log('Loading navigation config from DTO:', data.config)
+        actions.loadNavigation(data)
+        setNavName(data.config.name)
+      } else if (data && data.items) {
+        // Fallback for direct config object
+        actions.loadNavigation({ config: data, registry: {} })
+        setNavName(data.name || 'Loaded Navigation')
+      }
+    } catch (error) {
+      console.error('Error fetching navigation settings:', error)
+    }
+  }, [actions])
+
+  useEffect(() => {
+    fetchNavigationSettings()
+  }, [])
+
+  const handleSave = async () => {
+    try {
+      const config = actions.getNavConfig()
+      config.name = navName
+
+      // Extract all viewIds and their titles from the navigation config
+      const viewIdToTitle = new Map()
+      const collectViewIds = (items) => {
+        items.forEach(item => {
+          if (item.viewId) {
+            viewIdToTitle.set(String(item.viewId), item.title || `View ${item.viewId}`)
+          }
+          if (item.children && Array.isArray(item.children)) {
+            collectViewIds(item.children)
+          }
+        })
+      }
+      collectViewIds(config.items)
+
+      // Helper function to create slug from title
+      const createSlug = (title) => {
+        return title
+          .toLowerCase()
+          .trim()
+          .replace(/[^\w\s-]/g, '') // Remove special characters
+          .replace(/\s+/g, '-') // Replace spaces with hyphens
+          .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
+      }
+
+      // Build registry directly from viewIds with nav titles
+      const latestRegistry = {}
+
+      viewIdToTitle.forEach((title, viewId) => {
+        latestRegistry[viewId] = {
+          id: Number(viewId),
+          name: title,
+          slug: createSlug(title)
+        }
+      })
+
+      const saveData = {
+        config: config,
+        registry: latestRegistry
+      }
+
+      const jsonString = JSON.stringify(saveData)
+
+      // Use 'navigatorSetting' key as requested in previous sessions for DataTypes.Params
+      const result = await PostService(Endpoints.Navigator.Post.NavigatorSetting, true, {
+        value: jsonString
+      })
+
+      if (result) {
+        setSaveDialogOpen(false)
+      }
+    } catch (error) {
+      console.error('Error saving navigation:', error)
+    }
+  }
+
+  const handleLoad = (event) => {
+    const file = event.target.files[0]
+    if (!file) {
+      console.warn('No file selected')
+      return
+    }
+
+    console.log('Loading file:', file.name, file.type, file.size)
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      try {
+        const rawData = e.target.result
+        console.log('File content length:', rawData.length)
+
+        const data = JSON.parse(rawData)
+        console.log('Parsed JSON data:', data)
+
+        // Handle different JSON formats
+        let config
+        if (Array.isArray(data)) {
+          // If it's an array, wrap it in a config object
+          console.log('Detected array format, wrapping in config object')
+          config = {
+            name: 'Loaded Navigation',
+            items: data,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+          }
+        } else if (data.items && Array.isArray(data.items)) {
+          // If it's already a config object with items
+          console.log('Detected config object format')
+          config = {
+            name: data.name || 'Loaded Navigation',
+            items: data.items,
+            createdAt: data.createdAt || new Date().toISOString(),
+            updatedAt: data.updatedAt || new Date().toISOString()
+          }
+        } else {
+          throw new Error('Invalid navigation format. Expected array or object with items array.')
+        }
+
+        console.log('Final config to load:', config)
+        actions.loadNavigation(config)
+        setNavName(config.name)
+
+        // Show success message
+        alert(`Navigation loaded successfully! Found ${config.items.length} root item(s).`)
+
+        // Reset file input so same file can be loaded again
+        event.target.value = ''
+      } catch (error) {
+        console.error('Error loading navigation:', error)
+        console.error('Error stack:', error.stack)
+        alert(`Error loading navigation: ${error.message || 'Invalid JSON file'}\n\nCheck console for details.`)
+      }
+    }
+    reader.onerror = (error) => {
+      console.error('FileReader error:', error)
+      alert('Error reading file. Please try again.')
+    }
+    reader.readAsText(file)
+  }
+
+  return (
+    <Box sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      {/* Header */}
+      <Paper sx={{ p: 2, borderRadius: 0 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography variant="h5">Navigator Builder</Typography>
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <Button
+              startIcon={<ValidIcon />}
+              onClick={() => actions.validate()}
+              color={state.validation.isValid ? 'success' : 'warning'}
+            >
+              Validate
+            </Button>
+            <Button
+              startIcon={<LoadIcon />}
+              onClick={fetchNavigationSettings}
+              variant="outlined"
+            >
+              Reload
+            </Button>
+            <Button
+              startIcon={<LoadIcon />}
+              onClick={() => document.getElementById('load-input').click()}
+              variant="outlined"
+            >
+              Load File
+            </Button>
+            <input
+              id="load-input"
+              type="file"
+              accept=".json"
+              style={{ display: 'none' }}
+              onChange={handleLoad}
+            />
+            <Button
+              startIcon={<SaveIcon />}
+              onClick={() => setSaveDialogOpen(true)}
+              variant="contained"
+              disabled={!state.validation.isValid}
+            >
+              Save
+            </Button>
+          </Box>
+        </Box>
+
+        {/* Validation Status */}
+        {state.validation.errors.length > 0 && (
+          <Alert severity="error" sx={{ mt: 1 }}>
+            {state.validation.errors.length} error(s) found
+          </Alert>
+        )}
+        {state.validation.warnings.length > 0 && (
+          <Alert severity="warning" sx={{ mt: 1 }}>
+            {state.validation.warnings.length} warning(s) found
+          </Alert>
+        )}
+        {state.validation.isValid && state.validation.errors.length === 0 && (
+          <Alert severity="success" sx={{ mt: 1 }}>
+            Navigation is valid
+          </Alert>
+        )}
+      </Paper>
+
+      {/* View Mode Toggle */}
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={viewMode}
+          onChange={(e, newValue) => setViewMode(newValue)}
+          sx={{ minHeight: 48 }}
+        >
+          <Tab
+            label="Builder"
+            value="builder"
+            icon={<EditIcon />}
+            iconPosition="start"
+          />
+          <Tab
+            label="Preview"
+            value="preview"
+            icon={<PreviewIcon />}
+            iconPosition="start"
+          />
+        </Tabs>
+      </Box>
+
+      {/* Main Content */}
+      {viewMode === 'builder' ? (
+        <Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+          {/* Left Panel - Properties */}
+          <Box sx={{ width: 300, borderRight: 1, borderColor: 'divider' }}>
+            <PropertiesPanel />
+          </Box>
+
+          {/* Center Panel - Tree */}
+          <Box sx={{ flex: 1 }}>
+            <TreePanel />
+          </Box>
+        </Box>
+      ) : (
+        <Box sx={{ flex: 1, overflow: 'hidden' }}>
+          <PreviewPanel />
+        </Box>
+      )}
+
+      {/* Save Dialog */}
+      <Dialog open={saveDialogOpen} onClose={() => setSaveDialogOpen(false)}>
+        <DialogTitle>Save Navigation</DialogTitle>
+        <DialogContent>
+          <TextField
+            label="Navigation Name"
+            value={navName}
+            onChange={(e) => setNavName(e.target.value)}
+            fullWidth
+            sx={{ mt: 1 }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setSaveDialogOpen(false)}>Cancel</Button>
+          <Button onClick={handleSave} variant="contained">
+            Save
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  )
+}
+
+// ============================================================================
+// EXPORT
+// ============================================================================
+
+export default function NavigatorBuilderPage() {
+  return (
+    <NavigatorProvider>
+      <NavigatorBuilder />
+    </NavigatorProvider>
+  )
+}
+