ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

package/core/models/menus/components/menu-lists/menu-lists.js

@@ -1,584 +1,635 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message, Tag, Empty } from 'antd';
-import { ReloadOutlined, DeleteOutlined, EditOutlined, PlusCircleFilled, CopyOutlined } from '@ant-design/icons';
-import { Button, Card, Switch, DraggableWrapper } from '../../../../lib';
-//  for draggable menu list import { DndProvider } from "react-dnd";
-import { DndProvider } from 'react-dnd';
-import { Link, useParams, useLocation } from 'react-router-dom';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-import './menu-lists.scss';
-
-const { Search } = Input;
-const { Panel } = Collapse;
-
-const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [], disableAddModal = model.disableAddModal }) => {
-  const actions = [];
-
-  match = useParams();
-  const id = match.id;
-  // const location = useLocation();
-  const step = parseInt(new URLSearchParams(location.search).get('step')) || 1;
-
-  const [records, setRecords] = useState([]);
-  const [originalRecords, setOriginalRecords] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [drawerVisible, setDrawerVisible] = useState(false);
-  const [single, setSingle] = useState({});
-  const [drawerTitle, setDrawerTitle] = useState('');
-  const [selectedRecord, setSelectedRecord] = useState(null);
-  const [query, setQuery] = useState('');
-  const [dragMode, setDragMode] = useState(false);
-  const [orderChanged, setOrderChanged] = useState(false);
-
-  const [nextId, setNextId] = useState(10000);
-
-  useEffect(() => {
-    loadMenus();
-  }, [id]);
-
-  const loadMenus = () => {
-    setLoading(true);
-
-    model
-      .getCoreMenuLists
-      //   {
-      //   queries: [...additional_queries, { field: 'step', value: step }, { field: 'header_id', value: null }],
-      // }
-      ()
-      .then((res) => {
-        const sorted = (res.result || []).sort((a, b) => a.order - b.order);
-        setRecords(sorted);
-        setOriginalRecords(sorted);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  };
-
-  /**
-   *
-   */
-  const getRecords = () => {
-    let firstStepQueries = [
-      {
-        field: 'step',
-        value: step,
-      },
-    ];
-
-    let config = {
-      queries: [...additional_queries, ...firstStepQueries],
-    };
-
-    if (!additional_queries.length) {
-      config.queries.push({
-        field: 'header_id',
-        value: null,
-      });
-    }
-
-    setLoading(true);
-
-    // Get the records
-    return model
-      .get(config)
-
-      .then((res) => {
-        // setRecords(res.result);
-        var result = res.result;
-
-        if (Array.isArray(result)) {
-          setRecords(result.sort((a, b) => a.order - b.order));
-          // } else {
-          //     setRecords([])
-        }
-
-        setLoading(false);
-      })
-      .catch((error) => {
-        setLoading(false);
-
-        console.log(error);
-      });
-  };
-
-  const toggleDragMode = (checked) => {
-    setDragMode(checked);
-    if (checked) {
-      message.info('Drag mode enabled - Drag items anywhere, including the "Drop here" zones!');
-    }
-  };
-
-  // Function to find and remove an item from anywhere in the tree
-  const findAndRemoveItem = (items, itemId) => {
-    let foundItem = null;
-
-    const removeRecursive = (arr) => {
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i].id === itemId) {
-          foundItem = { ...arr[i] };
-          arr.splice(i, 1);
-          return true;
-        }
-        if (arr[i].sub_menus && arr[i].sub_menus.length > 0) {
-          if (removeRecursive(arr[i].sub_menus)) {
-            return true;
-          }
-        }
-      }
-      return false;
-    };
-
-    const newItems = JSON.parse(JSON.stringify(items));
-    removeRecursive(newItems);
-    return { newItems, foundItem };
-  };
-
-  // Function to insert item at specific location
-  const insertItemAt = (items, item, targetLevel, targetParentId, targetIndex) => {
-    const newItems = JSON.parse(JSON.stringify(items));
-
-    // Update item properties for new location
-    const updatedItem = {
-      ...item,
-      step: targetLevel,
-      header_id: targetParentId,
-    };
-
-    if (targetLevel === 1) {
-      // Insert at main level
-      newItems.splice(targetIndex, 0, updatedItem);
-    } else {
-      // Insert into nested level
-      const insertRecursive = (arr) => {
-        for (let i = 0; i < arr.length; i++) {
-          if (arr[i].id === targetParentId) {
-            if (!arr[i].sub_menus) arr[i].sub_menus = [];
-            arr[i].sub_menus.splice(targetIndex, 0, updatedItem);
-            return true;
-          }
-          if (arr[i].sub_menus && arr[i].sub_menus.length > 0) {
-            if (insertRecursive(arr[i].sub_menus)) {
-              return true;
-            }
-          }
-        }
-        return false;
-      };
-      insertRecursive(newItems);
-    }
-
-    return newItems;
-  };
-
-  const handleCrossLevelMove = useCallback(
-    (draggedItem, dropTarget) => {
-      const { targetLevel, targetParentId, targetIndex } = dropTarget;
-
-      // Prevent moving item into itself or its children
-      if (draggedItem.id === targetParentId) {
-        message.warning('Cannot move item into itself');
-        return;
-      }
-
-      // Remove item from original location
-      const { newItems: itemsAfterRemove, foundItem } = findAndRemoveItem(records, draggedItem.id);
-
-      if (!foundItem) {
-        message.error('Could not find item to move');
-        return;
-      }
-
-      // Insert item at new location
-      const finalItems = insertItemAt(itemsAfterRemove, foundItem, targetLevel, targetParentId, targetIndex);
-
-      setRecords(finalItems);
-      setOrderChanged(true);
-      message.success(`Moved "${foundItem.name}" to level ${targetLevel}`);
-    },
-    [records]
-  );
-
-  const deleteRecord = (rec) => {
-    model.delete(rec).then(loadMenus);
-  };
-
-  const filtered = records.filter((r) => r.caption?.toUpperCase().includes(query.toUpperCase()));
-
-  const visibleItems = filtered;
-
-  const onSearch = (event) => {
-    setQuery(event.target.value);
-  };
-
-  // ------------------------
-  // Recursive function to build payload
-  // ------------------------
-  const buildUpdatedOrderPayload = (menus, originalMenus) => {
-    const result = [];
-
-    menus.forEach((menu, index) => {
-      const original = findMenuById(originalMenus, menu.id);
-
-      const newOrder = index + 1;
-      const oldOrder = original ? original.order : null;
-
-      const orderChanged = oldOrder !== newOrder;
-      const parentChanged = original?.header_id !== menu.header_id;
-
-      // check sub menus
-      let updatedSubMenus = [];
-      if (menu.sub_menus?.length) {
-        updatedSubMenus = buildUpdatedOrderPayload(menu.sub_menus, originalMenus);
-      }
-
-      // include only if changed OR has changed children
-      if (orderChanged || parentChanged || updatedSubMenus.length) {
-        result.push({
-          id: menu.id,
-          order: newOrder,
-          header_id: menu.header_id,
-          name: menu.name,
-          ...(updatedSubMenus.length && { sub_menus: updatedSubMenus }),
-        });
-      }
-    });
-
-    return result;
-  };
-
-  // ------------------------
-  // Find menu by id (recursive)
-  // ------------------------
-  const findMenuById = (menus, id) => {
-    for (const menu of menus || []) {
-      if (menu.id === id) return menu;
-
-      if (menu.sub_menus?.length) {
-        const found = findMenuById(menu.sub_menus, id);
-        if (found) return found;
-      }
-    }
-    return null;
-  };
-
-  // ------------------------
-  // Save order function
-  // ------------------------
-  const saveOrder = () => {
-    const updatedMenus = buildUpdatedOrderPayload(records, originalRecords);
-
-    if (!updatedMenus.length) {
-      message.info('No order changes to save');
-      return;
-    }
-
-    const payload = { menus: updatedMenus };
-
-    model
-      .saveOrder({ formBody: payload })
-      .then(() => {
-        setOrderChanged(false);
-        loadMenus(); // refresh from backend
-      })
-      .catch(console.error);
-  };
-
-  const movePanel = useCallback(
-    (from, to) => {
-      if (!dragMode) return;
-      if (from === to) return;
-
-      setRecords((prevRecords) => {
-        const updated = [...prevRecords];
-        const [moved] = updated.splice(from, 1);
-        updated.splice(to, 0, moved);
-        return updated;
-      });
-
-      setOrderChanged(true);
-    },
-    [dragMode]
-  );
-
-  return (
-    <Card className="generic-list">
-      <div style={{ marginBottom: 16 }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-          <Search placeholder="Enter Search Value" allowClear style={{ width: 300, marginBottom: '0px' }} onChange={onSearch} />
-
-          <Space size="small">
-            <Button onClick={getRecords} size={'small'} type="default">
-              <ReloadOutlined />
-            </Button>
-
-            <Switch checked={dragMode} onChange={toggleDragMode} checkedChildren="Order On" unCheckedChildren="Order Off" />
-
-            {dragMode && orderChanged && (
-              <Button onClick={saveOrder} type="primary" size="small">
-                Save Order
-              </Button>
-            )}
-
-            <Button
-              type="primary"
-              size="small"
-              onClick={() => {
-                setSelectedRecord({ step: 1, header_id: null });
-                setDrawerTitle('Create New Menu');
-                setDrawerVisible(true);
-              }}
-            >
-              Create New Menu
-            </Button>
-          </Space>
-        </div>
-
-        {dragMode && (
-          <div
-            style={{
-              padding: '8px 12px',
-              backgroundColor: '#e6f7ff',
-              borderRadius: 4,
-              border: '1px solid #91d5ff',
-              fontSize: 13,
-            }}
-          >
-            <strong>💡 Tips:</strong>
-            <ul style={{ margin: '4px 0', paddingLeft: 20 }}>
-              <li>Drag between items to reorder at the same level</li>
-              <li>Drop on the green "↳ Drop here" zone to make it a child of that item</li>
-              <li>Works at all levels - unlimited nesting supported!</li>
-            </ul>
-          </div>
-        )}
-      </div>
-      {loading ? (
-        <Skeleton active />
-      ) : (
-        <>
-          <>
-            {/* {!view ? ( */}
-            <Card>
-              <DndProvider backend={HTML5Backend}>
-                <Collapse accordion>
-                  {visibleItems && visibleItems.length > 0 ? (
-                    visibleItems.map((item, index) => (
-                      <Panel
-                        key={item.id}
-                        header={
-                          <DraggableWrapper
-                            id={item.id}
-                            index={index}
-                            movePanel={movePanel}
-                            item={item}
-                            dragEnabled={dragMode}
-                            level={1}
-                            parentId={null}
-                            onCrossLevelMove={handleCrossLevelMove}
-                            canAcceptChildren={true}
-                          />
-                        }
-                        showArrow={item.sub_menus && item.sub_menus.length > 0}
-                        extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
-                      >
-                        {item.sub_menus && item.sub_menus.length > 0 && (
-                          <NestedMenu
-                            parentId={item.id}
-                            step={item.step + 1}
-                            items={item.sub_menus || []}
-                            model={model}
-                            dragMode={dragMode}
-                            setSelectedRecord={setSelectedRecord}
-                            setDrawerTitle={setDrawerTitle}
-                            setDrawerVisible={setDrawerVisible}
-                            deleteRecord={deleteRecord}
-                            level={2}
-                            onCrossLevelMove={handleCrossLevelMove}
-                            onChange={(subMenus) => {
-                              const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
-                              setRecords(updated);
-                              setOrderChanged(true);
-                            }}
-                          />
-                        )}
-                      </Panel>
-                    ))
-                  ) : (
-                    <div style={{ textAlign: 'center', padding: '40px 0' }}>
-                      <Empty description="No Menu Items" />
-                    </div>
-                  )}
-                </Collapse>
-              </DndProvider>
-            </Card>
-            {/* ) : (
-              <CardList model={model} data={filtered ? filtered : records} />
-            )} */}
-          </>
-        </>
-      )}
-
-      <Drawer title={drawerTitle} open={drawerVisible} width="80%" destroyOnClose onClose={() => setDrawerVisible(false)}>
-        {model.ModalAddComponent && (
-          <model.ModalAddComponent
-            formContent={selectedRecord}
-            match={match}
-            model={model}
-            additional_queries={additional_queries}
-            callback={() => {
-              setDrawerVisible(false);
-              loadMenus();
-            }}
-          />
-        )}
-      </Drawer>
-    </Card>
-  );
-};
-/* -----------------------------------------------------------------------
-   PANEL ACTIONS 
------------------------------------------------------------------------- */
-function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord) {
-  return (
-    <Space onClick={(e) => e.stopPropagation()}>
-      <Tag color={item.is_visible === true ? 'green' : 'blue'}>{item.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
-      <Button
-        size="small"
-        type="dashed"
-        onClick={() => {
-          setSelectedRecord({
-            // parent menu id
-            header_id: item.id,
-            step: item.step + 1,
-            // new record
-            id: null,
-          });
-          setDrawerTitle(`Add Submenu to "${item.name}"`);
-          setDrawerVisible(true);
-        }}
-      >
-        <PlusCircleFilled />
-        Add Sub Menu
-      </Button>
-      {model.ModalAddComponent && (
-        <Button
-          size="small"
-          type="default"
-          onClick={() => {
-            setSelectedRecord(item);
-            setDrawerTitle('Edit Menu');
-            setDrawerVisible(true);
-          }}
-        >
-          <EditOutlined />
-        </Button>
-      )}
-      <Button
-        size="small"
-        type="default"
-        onClick={() => {
-          setSelectedRecord({ ...item, id: null, copy: true });
-          setDrawerTitle('Copy Menu');
-          setDrawerVisible(true);
-        }}
-      >
-        <CopyOutlined />
-      </Button>
-      <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
-        <Button danger size="small" type="default">
-          <DeleteOutlined />
-        </Button>
-      </Popconfirm>
-    </Space>
-  );
-}
-
-function NestedMenu({
-  parentId,
-  step,
-  items,
-  model,
-  dragMode,
-  setSelectedRecord,
-  setDrawerTitle,
-  setDrawerVisible,
-  deleteRecord,
-  level,
-  onCrossLevelMove,
-  onChange,
-}) {
-  // do not render Collapse
-  if (!items || items.length === 0) return null;
-
-  const [localItems, setLocalItems] = useState(items);
-
-  useEffect(() => {
-    setLocalItems(items);
-  }, [items]);
-
-  const moveSubMenu = useCallback(
-    (from, to) => {
-      if (!dragMode || from === to) return;
-
-      const updated = [...localItems];
-      const [moved] = updated.splice(from, 1);
-      updated.splice(to, 0, moved);
-
-      setLocalItems(updated);
-      onChange?.(updated);
-    },
-    [dragMode, localItems, onChange]
-  );
-  if (!localItems || localItems.length === 0) {
-    // <-- don’t render anything if no submenus
-    return null;
-  }
-
-  return (
-    <Collapse accordion>
-      {localItems.map((child, index) => (
-        <Panel
-          key={child.id}
-          header={
-            <DraggableWrapper
-              id={child.id}
-              index={index}
-              movePanel={moveSubMenu}
-              item={child}
-              dragEnabled={dragMode}
-              level={level}
-              parentId={parentId}
-              onCrossLevelMove={onCrossLevelMove}
-              canAcceptChildren={true}
-            />
-          }
-          //  only show arrow if sub_menus exist
-          showArrow={child.sub_menus && child.sub_menus.length > 0}
-          extra={panelActions(child, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
-        >
-          <NestedMenu
-            model={model}
-            parentId={child.id}
-            step={step + 1}
-            items={child.sub_menus || []}
-            dragMode={dragMode}
-            setSelectedRecord={setSelectedRecord}
-            setDrawerTitle={setDrawerTitle}
-            setDrawerVisible={setDrawerVisible}
-            deleteRecord={deleteRecord}
-            level={level + 1}
-            onCrossLevelMove={onCrossLevelMove}
-            onChange={(submenus) => {
-              const updated = localItems.map((item) => (item.id === child.id ? { ...item, sub_menus: submenus } : item));
-              setLocalItems(updated);
-              onChange?.(updated);
-            }}
-          />
-        </Panel>
-      ))}
-    </Collapse>
-  );
-}
-
-export default MenuLists;
+import React, { useState, useCallback, useEffect } from 'react';
+import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message, Tag, Empty } from 'antd';
+import { ReloadOutlined, DeleteOutlined, EditOutlined, PlusCircleFilled, CopyOutlined } from '@ant-design/icons';
+import { Button, Card, Switch, DraggableWrapper } from '../../../../lib';
+//  for draggable menu list import { DndProvider } from "react-dnd";
+import { DndProvider } from 'react-dnd';
+import { Link, useParams, useLocation } from 'react-router-dom';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import './menu-lists.scss';
+
+const { Search } = Input;
+const { Panel } = Collapse;
+
+const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [], disableAddModal = model.disableAddModal }) => {
+  const actions = [];
+
+  match = useParams();
+  const id = match.id;
+  // const location = useLocation();
+  const step = parseInt(new URLSearchParams(location.search).get('step')) || 1;
+
+  const [records, setRecords] = useState([]);
+  const [originalRecords, setOriginalRecords] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [single, setSingle] = useState({});
+  const [drawerTitle, setDrawerTitle] = useState('');
+  const [selectedRecord, setSelectedRecord] = useState(null);
+  const [query, setQuery] = useState('');
+  const [dragMode, setDragMode] = useState(false);
+  const [orderChanged, setOrderChanged] = useState(false);
+  // keys of manually-expanded top-level panels (used when NOT searching)
+  const [manualOpenKeys, setManualOpenKeys] = useState([]);
+
+  const [nextId, setNextId] = useState(10000);
+
+  useEffect(() => {
+    loadMenus();
+  }, [id]);
+
+  const loadMenus = () => {
+    setLoading(true);
+
+    model
+      .getCoreMenuLists
+      //   {
+      //   queries: [...additional_queries, { field: 'step', value: step }, { field: 'header_id', value: null }],
+      // }
+      ()
+      .then((res) => {
+        const sorted = (res.result || []).sort((a, b) => a.order - b.order);
+        setRecords(sorted);
+        setOriginalRecords(sorted);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  };
+
+  /**
+   *
+   */
+  const getRecords = () => {
+    let firstStepQueries = [
+      {
+        field: 'step',
+        value: step,
+      },
+    ];
+
+    let config = {
+      queries: [...additional_queries, ...firstStepQueries],
+    };
+
+    if (!additional_queries.length) {
+      config.queries.push({
+        field: 'header_id',
+        value: null,
+      });
+    }
+
+    setLoading(true);
+
+    // Get the records
+    return model
+      .get(config)
+
+      .then((res) => {
+        // setRecords(res.result);
+        var result = res.result;
+
+        if (Array.isArray(result)) {
+          setRecords(result.sort((a, b) => a.order - b.order));
+          // } else {
+          //     setRecords([])
+        }
+
+        setLoading(false);
+      })
+      .catch((error) => {
+        setLoading(false);
+
+        console.log(error);
+      });
+  };
+
+  const toggleDragMode = (checked) => {
+    setDragMode(checked);
+    if (checked) {
+      message.info('Drag mode enabled - Drag items anywhere, including the "Drop here" zones!');
+    }
+  };
+
+  // Function to find and remove an item from anywhere in the tree
+  const findAndRemoveItem = (items, itemId) => {
+    let foundItem = null;
+
+    const removeRecursive = (arr) => {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].id === itemId) {
+          foundItem = { ...arr[i] };
+          arr.splice(i, 1);
+          return true;
+        }
+        if (arr[i].sub_menus && arr[i].sub_menus.length > 0) {
+          if (removeRecursive(arr[i].sub_menus)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    const newItems = JSON.parse(JSON.stringify(items));
+    removeRecursive(newItems);
+    return { newItems, foundItem };
+  };
+
+  // Function to insert item at specific location
+  const insertItemAt = (items, item, targetLevel, targetParentId, targetIndex) => {
+    const newItems = JSON.parse(JSON.stringify(items));
+
+    // Update item properties for new location
+    const updatedItem = {
+      ...item,
+      step: targetLevel,
+      header_id: targetParentId,
+    };
+
+    if (targetLevel === 1) {
+      // Insert at main level
+      newItems.splice(targetIndex, 0, updatedItem);
+    } else {
+      // Insert into nested level
+      const insertRecursive = (arr) => {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id === targetParentId) {
+            if (!arr[i].sub_menus) arr[i].sub_menus = [];
+            arr[i].sub_menus.splice(targetIndex, 0, updatedItem);
+            return true;
+          }
+          if (arr[i].sub_menus && arr[i].sub_menus.length > 0) {
+            if (insertRecursive(arr[i].sub_menus)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      };
+      insertRecursive(newItems);
+    }
+
+    return newItems;
+  };
+
+  const handleCrossLevelMove = useCallback(
+    (draggedItem, dropTarget) => {
+      const { targetLevel, targetParentId, targetIndex } = dropTarget;
+
+      // Prevent moving item into itself or its children
+      if (draggedItem.id === targetParentId) {
+        message.warning('Cannot move item into itself');
+        return;
+      }
+
+      // Remove item from original location
+      const { newItems: itemsAfterRemove, foundItem } = findAndRemoveItem(records, draggedItem.id);
+
+      if (!foundItem) {
+        message.error('Could not find item to move');
+        return;
+      }
+
+      // Insert item at new location
+      const finalItems = insertItemAt(itemsAfterRemove, foundItem, targetLevel, targetParentId, targetIndex);
+
+      setRecords(finalItems);
+      setOrderChanged(true);
+      message.success(`Moved "${foundItem.name}" to level ${targetLevel}`);
+    },
+    [records]
+  );
+
+  const deleteRecord = (rec) => {
+    model.delete(rec).then(loadMenus);
+  };
+
+  // Recursively filter the menu tree by caption. A menu is kept if its own
+  // caption matches OR any descendant matches. When the menu itself matches we
+  // keep its full subtree; when only a descendant matches we keep just the
+  // pruned path so the matching item stays reachable.
+  const filterMenus = (menus, q) => {
+    if (!q) return menus || [];
+    const lower = q.toLowerCase();
+
+    return (menus || []).reduce((acc, menu) => {
+      const selfMatch = (menu.caption || '').toLowerCase().includes(lower);
+      if (selfMatch) {
+        acc.push({ ...menu });
+        return acc;
+      }
+      const subFiltered = filterMenus(menu.sub_menus || [], q);
+      if (subFiltered.length) {
+        acc.push({ ...menu, sub_menus: subFiltered });
+      }
+      return acc;
+    }, []);
+  };
+
+  // Ids of items (at one level) that have sub_menus — used to auto-expand
+  // every branch leading to a search match.
+  const expandableKeys = (items) => (items || []).filter((m) => m.sub_menus && m.sub_menus.length > 0).map((m) => String(m.id));
+
+  const searchActive = !!query;
+  const visibleItems = filterMenus(records, query);
+
+  // While searching, derive the open panels synchronously from the visible tree
+  // (every branch on the path to a match), so the matched sub-menu is revealed.
+  // When not searching, use the user's manually-expanded panels.
+  const activeKeys = searchActive ? expandableKeys(visibleItems) : manualOpenKeys;
+
+  const onSearch = (event) => {
+    setQuery(event.target.value);
+  };
+
+  // ------------------------
+  // Recursive function to build payload
+  // ------------------------
+  const buildUpdatedOrderPayload = (menus, originalMenus) => {
+    const result = [];
+
+    menus.forEach((menu, index) => {
+      const original = findMenuById(originalMenus, menu.id);
+
+      const newOrder = index + 1;
+      const oldOrder = original ? original.order : null;
+
+      const orderChanged = oldOrder !== newOrder;
+      const parentChanged = original?.header_id !== menu.header_id;
+
+      // check sub menus
+      let updatedSubMenus = [];
+      if (menu.sub_menus?.length) {
+        updatedSubMenus = buildUpdatedOrderPayload(menu.sub_menus, originalMenus);
+      }
+
+      // include only if changed OR has changed children
+      if (orderChanged || parentChanged || updatedSubMenus.length) {
+        result.push({
+          id: menu.id,
+          order: newOrder,
+          header_id: menu.header_id,
+          name: menu.name,
+          ...(updatedSubMenus.length && { sub_menus: updatedSubMenus }),
+        });
+      }
+    });
+
+    return result;
+  };
+
+  // ------------------------
+  // Find menu by id (recursive)
+  // ------------------------
+  const findMenuById = (menus, id) => {
+    for (const menu of menus || []) {
+      if (menu.id === id) return menu;
+
+      if (menu.sub_menus?.length) {
+        const found = findMenuById(menu.sub_menus, id);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  // ------------------------
+  // Save order function
+  // ------------------------
+  const saveOrder = () => {
+    const updatedMenus = buildUpdatedOrderPayload(records, originalRecords);
+
+    if (!updatedMenus.length) {
+      message.info('No order changes to save');
+      return;
+    }
+
+    const payload = { menus: updatedMenus };
+
+    model
+      .saveOrder({ formBody: payload })
+      .then(() => {
+        setOrderChanged(false);
+        loadMenus(); // refresh from backend
+      })
+      .catch(console.error);
+  };
+
+  const movePanel = useCallback(
+    (from, to) => {
+      if (!dragMode) return;
+      if (from === to) return;
+
+      setRecords((prevRecords) => {
+        const updated = [...prevRecords];
+        const [moved] = updated.splice(from, 1);
+        updated.splice(to, 0, moved);
+        return updated;
+      });
+
+      setOrderChanged(true);
+    },
+    [dragMode]
+  );
+
+  return (
+    <Card className="generic-list">
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+          <Search placeholder="Search menus & sub-menus…" allowClear style={{ width: 300, marginBottom: '0px' }} onChange={onSearch} />
+
+          <Space size="small">
+            <Button onClick={getRecords} size={'small'} type="default">
+              <ReloadOutlined />
+            </Button>
+
+            <Switch checked={dragMode} onChange={toggleDragMode} checkedChildren="Order On" unCheckedChildren="Order Off" />
+
+            {dragMode && orderChanged && (
+              <Button onClick={saveOrder} type="primary" size="small">
+                Save Order
+              </Button>
+            )}
+
+            <Button
+              type="primary"
+              size="small"
+              onClick={() => {
+                setSelectedRecord({ step: 1, header_id: null });
+                setDrawerTitle('Create New Menu');
+                setDrawerVisible(true);
+              }}
+            >
+              Create New Menu
+            </Button>
+          </Space>
+        </div>
+
+        {dragMode && (
+          <div
+            style={{
+              padding: '8px 12px',
+              backgroundColor: '#e6f7ff',
+              borderRadius: 4,
+              border: '1px solid #91d5ff',
+              fontSize: 13,
+            }}
+          >
+            <strong>💡 Tips:</strong>
+            <ul style={{ margin: '4px 0', paddingLeft: 20 }}>
+              <li>Drag between items to reorder at the same level</li>
+              <li>Drop on the green "↳ Drop here" zone to make it a child of that item</li>
+              <li>Works at all levels - unlimited nesting supported!</li>
+            </ul>
+          </div>
+        )}
+      </div>
+      {loading ? (
+        <Skeleton active />
+      ) : (
+        <>
+          <>
+            {/* {!view ? ( */}
+            <Card>
+              <DndProvider backend={HTML5Backend}>
+                <Collapse
+                  accordion={!searchActive}
+                  activeKey={activeKeys}
+                  onChange={(keys) => setManualOpenKeys(Array.isArray(keys) ? keys : keys ? [keys] : [])}
+                >
+                  {visibleItems && visibleItems.length > 0 ? (
+                    visibleItems.map((item, index) => (
+                      <Panel
+                        key={item.id}
+                        header={
+                          <DraggableWrapper
+                            id={item.id}
+                            index={index}
+                            movePanel={movePanel}
+                            item={item}
+                            dragEnabled={dragMode}
+                            level={1}
+                            parentId={null}
+                            onCrossLevelMove={handleCrossLevelMove}
+                            canAcceptChildren={true}
+                          />
+                        }
+                        showArrow={item.sub_menus && item.sub_menus.length > 0}
+                        extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
+                      >
+                        {item.sub_menus && item.sub_menus.length > 0 && (
+                          <NestedMenu
+                            parentId={item.id}
+                            step={item.step + 1}
+                            items={item.sub_menus || []}
+                            model={model}
+                            dragMode={dragMode}
+                            searchActive={searchActive}
+                            query={query}
+                            setSelectedRecord={setSelectedRecord}
+                            setDrawerTitle={setDrawerTitle}
+                            setDrawerVisible={setDrawerVisible}
+                            deleteRecord={deleteRecord}
+                            level={2}
+                            onCrossLevelMove={handleCrossLevelMove}
+                            onChange={(subMenus) => {
+                              const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
+                              setRecords(updated);
+                              setOrderChanged(true);
+                            }}
+                          />
+                        )}
+                      </Panel>
+                    ))
+                  ) : (
+                    <div style={{ textAlign: 'center', padding: '40px 0' }}>
+                      <Empty description="No Menu Items" />
+                    </div>
+                  )}
+                </Collapse>
+              </DndProvider>
+            </Card>
+            {/* ) : (
+              <CardList model={model} data={filtered ? filtered : records} />
+            )} */}
+          </>
+        </>
+      )}
+
+      <Drawer title={drawerTitle} open={drawerVisible} width="80%" destroyOnClose onClose={() => setDrawerVisible(false)}>
+        {model.ModalAddComponent && (
+          <model.ModalAddComponent
+            formContent={selectedRecord}
+            match={match}
+            model={model}
+            additional_queries={additional_queries}
+            callback={() => {
+              setDrawerVisible(false);
+              loadMenus();
+            }}
+          />
+        )}
+      </Drawer>
+    </Card>
+  );
+};
+/* -----------------------------------------------------------------------
+   PANEL ACTIONS 
+------------------------------------------------------------------------ */
+function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord) {
+  return (
+    <Space onClick={(e) => e.stopPropagation()}>
+      <Tag color={item.is_visible === true ? 'green' : 'blue'}>{item.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
+      <Button
+        size="small"
+        type="dashed"
+        onClick={() => {
+          setSelectedRecord({
+            // parent menu id
+            header_id: item.id,
+            step: item.step + 1,
+            // new record
+            id: null,
+          });
+          setDrawerTitle(`Add Submenu to "${item.name}"`);
+          setDrawerVisible(true);
+        }}
+      >
+        <PlusCircleFilled />
+        Add Sub Menu
+      </Button>
+      {model.ModalAddComponent && (
+        <Button
+          size="small"
+          type="default"
+          onClick={() => {
+            setSelectedRecord(item);
+            setDrawerTitle('Edit Menu');
+            setDrawerVisible(true);
+          }}
+        >
+          <EditOutlined />
+        </Button>
+      )}
+      <Button
+        size="small"
+        type="default"
+        onClick={() => {
+          setSelectedRecord({ ...item, id: null, copy: true });
+          setDrawerTitle('Copy Menu');
+          setDrawerVisible(true);
+        }}
+      >
+        <CopyOutlined />
+      </Button>
+      <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
+        <Button danger size="small" type="default">
+          <DeleteOutlined />
+        </Button>
+      </Popconfirm>
+    </Space>
+  );
+}
+
+function NestedMenu({
+  parentId,
+  step,
+  items,
+  model,
+  dragMode,
+  searchActive,
+  query,
+  setSelectedRecord,
+  setDrawerTitle,
+  setDrawerVisible,
+  deleteRecord,
+  level,
+  onCrossLevelMove,
+  onChange,
+}) {
+  const [localItems, setLocalItems] = useState(items);
+  // keys of manually-expanded sub-panels (used when NOT searching)
+  const [manualOpenKeys, setManualOpenKeys] = useState([]);
+
+  useEffect(() => {
+    setLocalItems(items);
+  }, [items]);
+
+  const moveSubMenu = useCallback(
+    (from, to) => {
+      if (!dragMode || from === to) return;
+
+      const updated = [...localItems];
+      const [moved] = updated.splice(from, 1);
+      updated.splice(to, 0, moved);
+
+      setLocalItems(updated);
+      onChange?.(updated);
+    },
+    [dragMode, localItems, onChange]
+  );
+  if (!localItems || localItems.length === 0) {
+    // <-- don’t render anything if no submenus
+    return null;
+  }
+
+  // While searching, derive the open sub-panels from the items so the path to a
+  // match stays expanded; otherwise use the user's manually-expanded panels.
+  const activeKeys = searchActive
+    ? localItems.filter((c) => c.sub_menus && c.sub_menus.length > 0).map((c) => String(c.id))
+    : manualOpenKeys;
+
+  return (
+    <Collapse
+      accordion={!searchActive}
+      activeKey={activeKeys}
+      onChange={(keys) => setManualOpenKeys(Array.isArray(keys) ? keys : keys ? [keys] : [])}
+    >
+      {localItems.map((child, index) => (
+        <Panel
+          key={child.id}
+          header={
+            <DraggableWrapper
+              id={child.id}
+              index={index}
+              movePanel={moveSubMenu}
+              item={child}
+              dragEnabled={dragMode}
+              level={level}
+              parentId={parentId}
+              onCrossLevelMove={onCrossLevelMove}
+              canAcceptChildren={true}
+            />
+          }
+          //  only show arrow if sub_menus exist
+          showArrow={child.sub_menus && child.sub_menus.length > 0}
+          extra={panelActions(child, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
+        >
+          <NestedMenu
+            model={model}
+            parentId={child.id}
+            step={step + 1}
+            items={child.sub_menus || []}
+            dragMode={dragMode}
+            searchActive={searchActive}
+            query={query}
+            setSelectedRecord={setSelectedRecord}
+            setDrawerTitle={setDrawerTitle}
+            setDrawerVisible={setDrawerVisible}
+            deleteRecord={deleteRecord}
+            level={level + 1}
+            onCrossLevelMove={onCrossLevelMove}
+            onChange={(submenus) => {
+              const updated = localItems.map((item) => (item.id === child.id ? { ...item, sub_menus: submenus } : item));
+              setLocalItems(updated);
+              onChange?.(updated);
+            }}
+          />
+        </Panel>
+      ))}
+    </Collapse>
+  );
+}
+
+export default MenuLists;